Javascript - 防止将 onclick 事件附加到具有相同类的所有元素

Question

我正在制作一个简单的表单，其中包含一个输入字段，用户将通过单击递增器/递减器来填写所需的数量。表单是基于从数据库中动态拉取的数据创建的

下面是有问题的部分:html 和处理它的 jquery:

递增器、递减器和输入域:

<a href="#" class="removeItem" style = "color: tomato;">-</a>
<input type="text" id="purchase_quantity" class = "purchase_quantity" min="1" max="6" delta="0"  style = "width: 32px;" value="1">
<a href="#" class="addItem" style = "color: tomato;">+</a>

和 jquery 处理上面的内容:

jQuery(function ($) {
    $('.addItem').on('click', function () {
        var inputval = $(this).siblings('.purchase_quantity').val();
        var num = +inputval;
        num++;

        if(num>6)num=6;
            console.log(num);
            $(".purchase_quantity").val(num); 
        return false;
    });

    $('.removeItem').on('click', function () {
        var inputval = $(this).siblings('.purchase_quantity').val();
        var num = +inputval;
        num--;

        if(num<1)num=1;
            console.log(num);
            $(".purchase_quantity").val(num); 
        return false;
    });
});

现在发生的事情是:单击增量器/减量器(+ 和 -)时，输入字段上的值会在页面中的所有字段中发生变化，而不是仅单击一个字段。在这方面花了很多时间但没有成功，希望得到一些帮助

Answer 1

线

$(".purchase_quantity").val(num); 

字面意思是更改所有字段的值。之前你用过

$(this).siblings('.purchase_quantity').val()

要得到值，那为什么不也用

$(this).siblings('.purchase_quantity').val(num)

要设置吗？