gpt4 book ai didi

javascript - 加/减数量按钮的问题

转载 作者:行者123 更新时间:2023-11-30 20:15:28 26 4
gpt4 key购买 nike

我正在使用加号和减号按钮更新我的产品数量,这很有效,但我的问题是因为我在一个容器中有多个产品,它正在更新所有产品的数量。这是代码:

<form id='myform' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform2' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>

jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});

这里是 fiddle

我试过使用 .closest() 以仅针对特定的数量字段,但这完全破坏了功能

jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(this).closest('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(this).closest('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(this).closest('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$(this).closest('input[name='+fieldName+']').val(0);
}
});
});

最佳答案

Here is a forked fiddle与它一起工作。

您的问题出在表单本身和选择器上:

<form id='myform' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform2' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>

当您执行 $('input[name='+fieldName+']') 的 jquery 选择器时,它会返回与该条件匹配的每个元素,并且您的两个表单都有一个字段姓名。

使用 parent() 查找父表单元素,然后查找仅在该上下文中搜索,您将看到它按预期工作:

var currentVal = parseInt($(this).parent().find('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(this).parent().find('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(this).parent().find('input[name='+fieldName+']').val(0);
}

使用 closest() 只会向上返回文档层次结构,因此它没有机会找到同级元素。您也可以使用 siblings函数来识别所需的元素。

关于javascript - 加/减数量按钮的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51968990/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com