如何使用jQuery或Javascript区分循环内具有相同类的多个输入

我使用以下jQuery将

1

的增量添加到输入框中

$(function(){
    $('button.quantity-increment').on('click', function(){
        var form = $(this).closest('form');
        if($(this).hasClass('quantity-left-minus')){
            form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) - 1);
        } else {
            form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) + 1);
        }
        $('a.add_to_cart_variable').attr('data-quantity', form.find('input.quantity').val());
        logDataQuantityAttribute();
    });

    form.find('input.quantity').on('keyup', function(){
        $('a.add_to_cart_variable').attr('data-quantity', this.value);
        logDataQuantityAttribute();
    });
});

下面的表单位于Wordpress循环中。因此，当我单击加号和减号增量按钮时，它会更改所有的输入值

在加号和减号图示符所在的表单中，是否存在只增加输入的方法

<form class="cart-num" action="index.html" method="post">
    <input type="text" name="quantity" class="form-control input-number quantity" value="1" min="1" max="100">
    <span class="input-group-btn">
        <button type="button" class="quantity-left-minus quantity-increment btn btn-number"  data-type="minus" data-field="">
          <span class="glyphicon glyphicon-minus"></span>
        </button>
    </span>
    <span class="input-group-btn">
        <button type="button" class="quantity-right-plus quantity-increment btn btn-number" data-type="plus" data-field="">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
    </span>
</form>

---

是的，首先，有一种方法可以使用jquery

选择器

使用以下选项选择单击图标的形式：

$('span.glyphicon').on('click', function(){
   var form = $(this).parents('form.cart-num');
});

然后，您可以在表单中进行查找，并且只在表单中增加输入

$(function(){
    $('span.glyphicon').on('click', function(){
        var form = $(this).parents('form.cart-num');
        if($(this).hasClass('glyphicon-minus')){
            form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) - 1);
        } else {
            form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) + 1);
        }
        $('a.add_to_cart_variable').attr('data-quantity', form.find('input#quantity').val());
        logDataQuantityAttribute();
    });

    $('input#quantity').on('keyup', function(){
        $('a.add_to_cart_variable').attr('data-quantity', this.value);
        logDataQuantityAttribute();
    });
});

工作示例：


$（函数（）{
$（'span.glyphicon'）。在（'click'，function（）上{
var form=$（this.parents（'form.cart num'）；
if（$（this）.hasClass（'glyphicon-减号'））{
form.find（'input'）.val（parseInt（form.find（'input'）.val（））-1）；
}否则{
form.find（'input'）.val（parseInt（form.find（'input'）.val（））+1）；
}
//$（'a.add_to_cart_variable'）.attr（'data-quantity'，form.find（'input'）.val（））；
//logDataQuantityAttribute（）；
});
$（'input#quantity'）。在（'keyup'，function（）上{
//$（'a.add_to_cart_variable'）.attr（'data-quantity'，this.value）；
logDataQuantityAttribute（）；
});
});
按钮{填充：0px；边框：无；背景：透明；}

-
+
-
+
既然您提到了
下面的表单在Wordpress循环中
，那么我认为表单元素的id将被重复。因此，通过引用元素的
id
来设置JQuery逻辑是个坏主意。因此，为了安全起见，您可以使用此代码：


$（文档）.ready（函数（）{
$（'.quantity right plus'）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
var inputField=$（this）.closest（'form'）.find（'input[type=“text”]”）；
//获取其当前值
var currentVal=parseInt（$（inputField.val（））；
//如果不是未定义的
如果（！isNaN（currentVal））{
//增量
$（输入字段）.val（当前值+1）；
}否则{
//否则，在那里放一个0
$（inputField）.val（0）；
}
});
$（“.数量左减”）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取要更改的文本字段
var inputField=$（this）.closest（'form'）.find（'input[type=“text”]”）；
//获取其当前值
var currentVal=parseInt（$（inputField.val（））；
//如果它不是未定义的或大于0
如果（！isNaN（currentVal）&¤tVal>0）{
//减量一
$（输入字段）.val（当前值-1）；
}否则{
//否则，在那里放一个0
$（inputField）.val（0）；
}
});
}); 

-
+
您需要遵循一条主要规则。当您处理多个元素时，不应使用id，而应使用类来简化操作。现在我可以理解您的HTML有多个输入具有相同id“quantity”，这是一个很大的数字。请删除id并在类中添加
“quantity”
字符串。然后，您可以执行
$（this.nexist（'form'）。查找（'input.quantity'）
，而不是
$（'input#quantity'）
。请告诉我这是否不干净
输入
元素应具有
名称
属性
按钮
元素不能位于
span
元素内，并且
按钮
元素内不需要
span
元素。只需将图标的类放在按钮本身上。也就是说，您的活动应该在
按钮上，而不是
span
内。请您回复答案，以便我知道它对您有效。如果它满足了您的问题，请投票并将其标记为绿色，否则请告诉我是否需要更改或添加任何其他内容。我更新了问题以添加您对类等的一些更改。它现在可以工作，除非当我向下滚动到产品编号2或3时，如果我按加号或减号，它仍然会增加所有更改，有什么想法吗？