Javascript jquery单击“仅更改此输入值”或“链接数据属性”可从循环中删除

我有一个从数据库调用产品的php循环。有一个数量输入字段和一个ajax添加到购物车按钮。 现在，ajax添加购物车功能从添加购物车链接数据属性获取产品id和数量。因此，我希望当我更改数量字段值时，添加购物车链接数据数量将自动更改。因此，我可以将已发送的产品数量添加到购物车

我试图这样做，但不幸的是，它改变了所有产品的数量点击，因为同一类。为什么这样做只会改变我点击的数量

也许产品id类在这里工作？但是我如何在jquery中设置动态产品id呢

这是我的密码：

HTML

<div class="row">
    <div class="col-md-4">
        <img src="img1.jpg" /><br />
        <h2>Product 1</h2>
    <button class="button">+</button>
    <button class="button">-</button>
        <input type="number" class="input" value="1" min="1" />
        <a href="product.php?add-to-cart=1" data-id="1" data-quantity="1" class="add-to-cart ajax product-1">Add to Cart</a>
    </div>

    <div class="col-md-4">
        <img src="img2.jpg" /><br />
        <h2>Product 2</h2>
    <button class="button">+</button>
    <button class="button">-</button>
        <input type="number" class="input" value="1" min="1" />
        <a href="product.php?add-to-cart=2" data-id="2" data-quantity="1" class="add-to-cart ajax product-2">Add to Cart</a>
    </div>

    <div class="col-md-4">
        <img src="img3.jpg" /><br />
        <h2>Product 3</h2>
    <button class="button">+</button>
    <button class="button">-</button>
        <input type="number" class="input" value="1" min="1" />
        <a href="product.php?add-to-cart=3" data-id="3" data-quantity="1" class="add-to-cart ajax product-2">Add to Cart</a>
    </div>

    <div class="col-md-4">
        <img src="img4.jpg" /><br />
        <h2>Product 4</h2>
    <button class="button">+</button>
    <button class="button">-</button>
        <input type="number" class="input" value="1" min="1" />
        <a href="product.php?add-to-cart=4" data-id="4" data-quantity="1" class="add-to-cart ajax product-4">Add to Cart</a>
    </div>
</div>

产品1
+
-


产品2
+
-


产品3
+
-


产品4
+
-

Jquery

<script>
$(function() {
 $(".button").on("click", function() {
   var $button = $(this);
   var oldValue = $('.input').val();

   if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
       // Don't allow decrementing below zero
      if (oldValue > 1) {
        var newVal = parseFloat(oldValue) - 1;
        } else {
        newVal = 1;
      }
      }
    $('a.add-to-cart').attr('data-quantity', newVal);
    $('.input').val(newVal);
 });
});
</script>

$（函数（）{
$（“.button”）。在（“单击”，函数（）{
var$按钮=$（此按钮）；
var oldValue=$（'.input'）.val（）；
如果（$button.text（）==“+”）{
var newVal=parseFloat（oldValue）+1；
}否则{
//不允许在零以下递减
如果（旧值>1）{
var newVal=parseFloat（oldValue）-1；
}否则{
newVal=1；
}
}
$（'a.add-to-cart'）.attr（'data-quantity'，newVal）；
$（'.input'）.val（newVal）；
});
});

代码笔：

---

在给我一个解决方案之前，请不要推负号。也许你知道，但我不知道。如果您分享您的知识，这将对我和其他人有所帮助。

如果您使用的选择器匹配共享类的所有输入，您可以为每个项推送唯一id，也可以使用选择器仅查找同一容器中的项

例如

---

我改变这一点，它的工作为第一个产品，但其他是从第一个产品的数量开始。示例：如果第一个产品数量为14，则如果单击第二个或第三个产品，则此产品数量从15开始堆叠，如果按+，如果按-则为13，然后堆叠！这是url：您还需要从父容器输入中获取oldValue，在我的示例中没有更改。更新了我的示例。

$(function() {
 $(".button").on("click", function() {
   var $button = $(this);
   var $parent = $button.parent(); 
   var oldValue = $parent.find('.input').val();

   if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
       // Don't allow decrementing below zero
      if (oldValue > 1) {
        var newVal = parseFloat(oldValue) - 1;
        } else {
        newVal = 1;
      }
      }
    $parent.find('a.add-to-cart').attr('data-quantity', newVal);
    $parent.find('.input').val(newVal);
 });
});