我正在制作一个简单的表单,其中包含一个输入字段,用户将通过单击递增器/递减器来填写所需的数量。表单是基于从数据库中动态拉取的数据创建的
下面是有问题的部分: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;
});
});
现在发生的事情是:单击增量器/减量器(+ 和 -)时,输入字段上的值会在页面中的所有字段中发生变化,而不是仅单击一个字段。在这方面花了很多时间但没有成功,希望得到一些帮助
最佳答案
线
$(".purchase_quantity").val(num);
字面意思是更改所有字段的值。之前你用过
$(this).siblings('.purchase_quantity').val()
要得到值,那为什么不也用
$(this).siblings('.purchase_quantity').val(num)
要设置吗?
关于Javascript - 防止将 onclick 事件附加到具有相同类的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41853378/