jquery - jQuery 代码控制所有块而不是选定的块

Question

我有这个 HTML 块来控制数量：

<div class="cart-product-quantity">
    <div class="quantity m-l-5">
        <input type="button" class="minus" value="-">
        <input type="text" class="qty" value="1">
        <input type="button" class="plus" value="+">
    </div>
</div>

这里的jQuery代码：

$(document).ready(function(){
    $('.qty').prop('disabled', true);
    $('.plus').click(function(){
        $('.qty').val(parseInt($('.qty').val()) + 1 );
    });
    $('.minus').click(function(){
        $('.qty').val(parseInt($('.qty').val()) - 1 );
        if ($('.qty').val() == 0) {
            $('.qty').val(1);
        }
    });
});

我的问题是因为我在很多地方都有 HTML，JS 代码控制着所有的块，而它应该控制选定的块。

请问我该如何更改？

谢谢。

标签： jquery

Answer 1

您需要this在事件处理程序中使用关键字click来引用单击的按钮。从那里您可以遍历 DOM 以查找相关input元素，在下面的示例中我使用siblings().

另外请注意，您可以通过使用 来简化确保值不能小于 1 的条件Math.max()。尝试这个：

jQuery($ => {
  $('.qty').prop('disabled', true);
  
  $('.plus').click(function() {
    $(this).siblings('.qty').val((i, v) => parseInt(v, 10) + 1);
  });
  
  $('.minus').click(function() {
    $(this).siblings('.qty').val((i, v) => Math.max(1, parseInt(v, 10) - 1));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart-product-quantity">
  <div class="quantity m-l-5">
    <input type="button" class="minus" value="-">
    <input type="text" class="qty" value="1">
    <input type="button" class="plus" value="+">
  </div>
</div>
<div class="cart-product-quantity">
  <div class="quantity m-l-5">
    <input type="button" class="minus" value="-">
    <input type="text" class="qty" value="1">
    <input type="button" class="plus" value="+">
  </div>
</div>