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代码控制所有的块,而它应该控制选定的块。

请问我怎么换这个？

多谢了。

Answer 1

在.cart-product-quantity>.quantity块上设置事件可以确保事件在正确的位置触发。请查看下面的片段。

null

$(document).ready(function () {
    setProductQuantityEvents();
});

function setProductQuantityEvents() {
    var $productQuantity = $('.cart-product-quantity>.quantity');
    $productQuantity.find('.qty').prop('disabled', true);
    $productQuantity.on('click', '.plus', function () {
        var $this = $(this),
            $quantity = $this.siblings('.qty'),
            qty = parseInt($quantity.val()) + 1;
        $quantity.val(qty);
    }).on('click', '.minus', function () {
        var $this = $(this),
            $quantity = $this.siblings('.qty'),
            qty = parseInt($quantity.val()) - 1;
        $quantity.val(qty < 1 ? 1 : qty);
    })
}

<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>
<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>

Answer 2

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

此外，请注意，您可以使用math.max()简化确保值不能小于1的条件。试试看：

null

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>