javascript - 使用jquery增加和减少多行中的输入表单值

Question

我有我的购物车页面，用户可以在其中增加和减少产品数量的值，我可以有多个产品，所以我不知道如何更改多行中的值，每行都有自己的数量输入

我的html代码

<form method="POST" action="" id="cart-form">
 <input name="_method" type="hidden" value="PUT"><input name="_token" 
  type="hidden" value="ikL1QisIpVm0CXTAXGqeaP5vf8ulkeUAlsa7jnFE">
    <input type="button" value="-" class="minus" id="min">
    <input name="qty" id="quantity" type="text" value="1" class="qty">
    <input type="button" value="+" class="plus" id="plus">                       
</form>

我的js代码

$('.minus').click(function(){
    if ($('#quantity').val() != 0)
        $('#quantity' ).val(parseInt($('#quantity').val()) - 1);
});

$('.plus').click(function(){
    $('#quantity').val(parseInt($('#quantity').val()) + 1);
});

Answer 1

您不能有多个相同的 ID(数量)。您希望根据其相对于单击的 +/- 按钮的位置获得“正确”的数量字段。

对于减号，数量字段是下一个兄弟:

$('.minus').click(function(){
  quantityField = $(this).next();
  if (quantityField.val() != 0) {
     quantityField.val(parseInt(quantityField.val(), 10) - 1);
  }
});

对于plus，数量字段是前一个兄弟

$('.plus').click(function(){
  quantityField = $(this).prev();
  quantityField.val(parseInt(quantityField.val(), 10) + 1);
});