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 of incrementor / decrementor（+和 - ）输入字段上的值会在页面中的所有字段中发生变化，而不是仅单击一次。花了很长时间没有成功，并会感谢一些帮助

Answer 1

该行

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

从字面上看，

要改变所有字段的值。之前你用过

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

获取值，为什么不使用

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

设定它？

Answer 2

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

获取匹配元素集中每个元素的兄弟姐妹，可选择由选择器过滤。

将它们放在单独的div元素中，并调整您的setter实际上只更新div内的兄弟姐妹。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

3 个答案: