如何获取每个 .count
的值,使其随每个 .item
的 .qty
输入中输入的值动态变化?
$(function() {
$('.qtyplus').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
if (!isNaN(currentVal)) {
$('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
$('input[name=' + fieldName + ']').val(0);
}
});
$(".qtyminus").click(function(e) {
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
$('input[name=' + fieldName + ']').val(0);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="count">100</div>
<div id='myform' method='POST' action='#'>
<label for="">qty </label><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' />
</div>
</div>
<div class="item">
<div class="count">75</div>
<div id='myform' method='POST' action='#'>
<label for="">qty </label><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' />
</div>
</div>
最佳答案
您可以使用 .closest
选择父元素,然后使用 .find
选择器仅选择该父元素内的那些元素。
通过选择 parent = $(this).closest('.item');
更新了您的代码,然后使用 在该父级中查找
.input
元素>$parent.find('input[name=' + fieldName + ']')
添加了函数updateCount()
,并在开头设置了.count
的val
属性。
添加了 $('input[name=quantity]').keyup
事件。
下面是完整的代码。
$(function() {
$('.count').each(function() {
$(this).data('val', $(this).text());
});
$('input[name=quantity]').keyup(function() {
updateCount($(this).closest('.item').find('.count'), $(this));
});
$('.qtyplus').click(function(e) {
e.preventDefault();
$parent = $(this).closest('.item');
fieldName = $(this).attr('field');
var currentVal = parseInt($parent.find('input[name=' + fieldName + ']').val());
if (!isNaN(currentVal)) {
$parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
$parent.find('input[name=' + fieldName + ']').val(0);
}
updateCount($parent.find('.count'), $parent.find('input[name=' + fieldName + ']'));
});
$(".qtyminus").click(function(e) {
e.preventDefault();
$parent = $(this).closest('.item');
fieldName = $(this).attr('field');
var currentVal = parseInt($parent.find('input[name=' + fieldName + ']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
$parent.find('input[name=' + fieldName + ']').val(0);
}
updateCount($parent.find('.count'), $parent.find('input[name=' + fieldName + ']'));
});
});
function updateCount($count, $input) {
$count.text(parseInt($count.data('val')) - (parseInt($input.val()) || 0));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="count">100</div>
<div id='myform' method='POST' action='#'>
<label for="">qty </label>
<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' />
</div>
</div>
<div class="item">
<div class="count">75</div>
<div id='myform' method='POST' action='#'>
<label for="">qty </label>
<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' />
</div>
</div>
关于javascript - jQuery - 数量增量数学,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51489517/