使用jQuery增加和减少输入值 [英] Increase and decrease values for inputs using jquery
问题描述
单击+和-按钮时，我需要增加和减少输入的值，但这似乎不起作用.我从这篇文章中获得了代码:如何使用jQuery来增加数量字段的值?单击添加按钮时，我插入了console.log语句以进行调试，令人惊讶的是，即使我单击了带有id的按钮，我也得到了3的值.的add1.如果您能向我指出错误，将不胜感激，谢谢！
I need to increase and decrease the value of inputs when clicking the + and - buttons but it doesn't seem to work. I got the code from this post: How to increase the value of a quantity field with jQuery? When clicking on the add button, I inserted a console.log statement for debugging purposes and surprisingly, I get a value of 3 even though I clicked on a button with an id of add1. Would really appreciate it if you could point out to me the error, thanks!
HTML:
<body>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
<input id="qty1" type="text" value="1">
<img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20">
<input id="qty2" type="text" value="1">
<img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
</body>
jQuery:
$(function () {
var numButtons = 2;
//console.log(typeof(numButtons));
//console.log(numButtons);
for (var i = 1; i <= numButtons; i++) {
$("#add" + i).click(function () {
console.log(i);
var currentVal = parseInt($("#qty" + i).val());
//console.log(currentVal);
if (!isNaN(currentVal)) {
$("#qty" + i).val(currentVal + 1);
}
});
$("#minus" + i).click(function () {
var currentVal = parseInt($("#qty" + i).val());
if (!isNaN(currentVal) && currentVal > 0) {
$("#qty" + i).val(currentVal - 1);
}
});
}
});
jsfiddle- http://jsfiddle.net/hMS6Y/
jsfiddle - http://jsfiddle.net/hMS6Y/
推荐答案
使用class，
HTML
<body>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/>
<input id="qty1" type="text" value="1" class="qty"/>
<img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/>
<input id="qty2" type="text" value="1" class="qty"/>
<img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
</p>
</body>
脚本
$(function () {
$('.add').on('click',function(){
var $qty=$(this).closest('p').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
});
$('.minus').on('click',function(){
var $qty=$(this).closest('p').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
提琴手: http://jsfiddle.net/hMS6Y/2/
或者，您可以将代码简短化，
Alternatively, you can short your code like,
$(function() {
$('.minus,.add').on('click', function() {
var $qty = $(this).closest('p').find('.qty'),
currentVal = parseInt($qty.val()),
isAdd = $(this).hasClass('add');
!isNaN(currentVal) && $qty.val(
isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus" />
<input id="qty1" type="text" value="1" class="qty" />
<img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus" />
<input id="qty2" type="text" value="1" class="qty" />
<img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>
这篇关于使用jQuery增加和减少输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
