使用jquery在多行中递增和递减输入表单值

Question

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

我的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));
});

Answer 2

查看您刚刚在以下行中输入的代码，

$('#quantity' ).val(parseInt(custom7('#quantity').val()) - 1);

您可能想要将其更改为

$('#quantity' ).val(parseInt($('#quantity').val()) - 1);

custom7不是jQuery的一部分，$是。 这是展示其工作的小提琴，JSFiddle