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

现在，正在发生的事情是：递增/递减（+和-）的onclick输入字段上的值将在页面中的所有字段之间变化，而不是仅单击一次。 已经花了很多时间但没有成功，将不胜感激

Answer 1

线

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

表示从字面上更改所有字段的值。 您之前使用过

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

获得价值，为什么不还使用

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

设置吗？

Answer 2

那是因为siblings会让您获得同一等级的所有物品。

获取匹配的元素集中每个元素的同级，可以选择使用选择器进行过滤。

将它们放在单独的div元素中，并调整您的设置器，使其实际上仅更新该div的兄弟姐妹。

 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); $(this).siblings('.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); $(this).siblings('.purchase_quantity').val(num); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="#" class="removeItem" style = "color: tomato;">-</a> <input type="text" id="purchase_quantity2" class = "purchase_quantity" min="1" max="6" delta="0" style = "width: 32px;" value="1"> <a href="#" class="addItem" style = "color: tomato;">+</a> </div> <div> <a href="#" class="removeItem" style = "color: tomato;">-</a> <input type="text" id="purchase_quantity1" class = "purchase_quantity" min="1" max="6" delta="0" style = "width: 32px;" value="1"> <a href="#" class="addItem" style = "color: tomato;">+</a> </div> 

Answer 3

您应该将$(".purchase_quantity").val(num)更改$("#purchase_quantity").val(num)