我正在使用以下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>
答案 0 :(得分：1)
因为你已经提到了The form below is inside of a Wordpress loop所以我认为将重复表单元素的id。因此，通过引用元素的id来设置JQuery逻辑是一个坏主意。因此，您可以使用此代码以确保安全：
$(document).ready(function(){
$('.quantity-right-plus').click(function(e){
// Stop acting like a button
e.preventDefault();
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(inputField).val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
$(".quantity-left-minus").click(function(e) {
// Stop acting like a button
e.preventDefault();
//get the text field to be changed
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(inputField).val(currentVal - 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus 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 btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
您可以注意到我使用input[type="text"]作为选择器来查找元素。如果你在JQuery代码中通过id引用元素，那么id不会像id那样相同，并且会给你不正确的结果。
答案 1 :(得分：0)
是的，有一种方法首先使用jquery selectors
选择点击的字形的形式：
$('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();
});
});
工作示例：
$(function(){
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
if($(this).hasClass('glyphicon-minus')){
form.find('input').val(parseInt(form.find('input').val()) - 1);
} else {
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').on('keyup', function(){
//$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});button { padding: 0px; border: none; background: transparent; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus 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 btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus 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 btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>