我在一个页面上有多个表单,还有多个带有加号/减号的输入框。
我无法让这些输入框单独工作。可能是因为一些错误/相同的 ID 或类似的东西,或者可能是我的代码设置错误。问题是我在代码中找不到错误,并且在控制台中没有收到任何错误。
我有:
function quantity_change(way, id){
quantity = $('#product_amount_'+id).val();
if(way=='up'){
quantity++;
} else {
quantity--;
}
if(quantity<1){
quantity = 1;
}
if(quantity>10){
quantity = 10;
}
$('#product_amount_'+id).val(quantity);
}
还有我的 html:
//row 1
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_1234"/></div>
<div class="change" data-id="1234">
<a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a>
<a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a>
</div>
//row 2
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_4321"/></div>
<div class="change" data-id="4321">
<a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a>
<a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a>
</div>
我以为这样的东西可以解决问题,但事实并非如此:(
$(document).ready(function(){
$('.change a').click(function(){
var id = $(this).find('.change').data('id');
quantity_change(id)
});
});
非常感谢任何帮助!
最佳答案
您应该使用closest()
方法来访问具有类change
的父div,然后您可以读取数据属性id的值。
var id = $(this).closest('.change').data('id');
alert(id);
由于您已经使用普通的 JavaScript 绑定(bind)了点击事件,因此您的 HTML 标记中不需要 onclick
代码。
此外,您的 quantity_change
方法需要 2 个参数并同时使用这两个参数,但您只传递一个参数。您可以将 way
的值保留在 anchor 标记上的 HTML 5 数据属性中,并从中读取并将其传递给您的方法。
<div class="change" data-id="1234">
<a href="#" data-way="up" title="+" class="up">+</a>
<a href="#" data-way="down" title="-" class="down">-</a>
</div>
所以更正后的js代码是
$(document).ready(function(){
$('.change a').click(function(e){
e.preventDefault();
var _this=$(this);
var id = _this.closest('.change').data('id');
var way= _this.data("way");
quantity_change(way,id)
});
});
Here是一个工作示例。
关于javascript - Jquery多加减脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34403000/