Jquery 加/减增量器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2244862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Plus/Minus Incrementer
提问by 1''''
I want to have a client side Plus / Minus system where a user can click the plus and a value is incremented by 1, minus and the value is decreased by 1, the value should never go below zero and should start on 0. Is there a way to do this simply in jquery? All the jquery plugins look at bit OTT for this operation.
我想要一个客户端 Plus/Minus 系统，用户可以在其中单击加号，值增加 1，减号，值减 1，值永远不应该低于零，应该从 0 开始。有吗？一种简单地在jquery中做到这一点的方法？所有的 jquery 插件都会针对这个操作查看 bit OTT。
Any help appreciated, ta.
任何帮助表示赞赏，ta。
回答by Rowan
something like this:
像这样：
HTML:
HTML：
<a id="minus" href="#">-</a>
<span id="value">0</span>
<a id="plus" href="#">+</a>
Javascript:
Javascript：
$(function(){
var valueElement = $('#value');
function incrementValue(e){
valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
return false;
}
$('#plus').bind('click', {increment: 1}, incrementValue);
$('#minus').bind('click', {increment: -1}, incrementValue);
});
回答by Aistina
var currentValue = 0;
$(document).ready(function() {
$('#up').click(function() {
currentValue++;
});
$('#down').click(function() {
if (currentValue > 0) {
currentValue--;
}
});
});
Putting currentValuein a textfield or other element would then be trivial.
将currentValue随后在文本字段或其它元件将是微不足道的。
回答by Andrew
This is actually built into jQuery - http://jqueryui.com/spinner/
这实际上内置于 jQuery - http://jqueryui.com/spinner/
回答by Felix Kling
Sure you can, e.g.:
当然可以，例如：
<span id="minus"> - </span>
<span id="value"> 0 </span>
<span id="plus"> + </span>
<script type="text/javascript">
$(function() {
var value = parseInt($('#value').text(value));
$('#minus').click(function() {
if (value == 0) return;
value--;
$('#value').text(value);
}
$('#plus').click(function() {
value++;
$('#value').text(value);
}
});
</script>
回答by Gabriele Petrioli
The jquery part
jquery部分
// initialize counter
var counter = 0;
// set the + functionality
$('#plus').click( function(){$('#display').html( ++counter )} );
// set the - functionality
$('#minus').click( function(){$('#display').html( (counter-1<0)?counter:--counter )} );
// initialize display
$('#display').html( counter );
and the html part
和 html 部分
<span id="plus">+</span>
<span id="minus">-</span>
<div id="display"></div>
回答by treydock
A very simple way to do this without JQuery...
在没有 JQuery 的情况下执行此操作的一种非常简单的方法...
<script language=javascript>
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=button value='-' onclick='javascript:process(-1)'>
<input type=test size=10 id='v' name='v' value='0'>
<input type=button value='+' onclick='javascript:process(1)'>
回答by dxh
<span id="value">5</span>
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />
$('#plus').click(function() { changeValue(1); });
$('#minus').click(function() { changeValue(-1); });
function changeValue(val) {
var container = $('#value');
var current = parseInt(container.html(), 10);
container.html(Math.max(0, current + val).toString());
}
回答by gronaz
Here is my quite more complex version, you juste need to give the class "mkdminusplus" to your div:
<div class="mkdminusplus" defaultval="50"></div>and then add
这是我相当复杂的版本，你需要给你的 div 类“mkdminusplus”：
<div class="mkdminusplus" defaultval="50"></div>然后添加
<script>
jQuery(function(){
jQuery('.mkdminusplus').append('<span class="mkdminus"><i class="icon-minus-sign"></i></span><input class="mkdvalue" type="number" value=""><span class="mkdplus"><i class="icon-plus-sign"></i></span>');
jQuery('.mkdminusplus').each(function(){
if (jQuery(this).attr('defaultval') == undefined) jQuery(this).attr('defaultval','0');
jQuery(this).find('.mkdvalue').val(jQuery(this).attr('defaultval'));
});
jQuery('.mkdminus').bind('click', function() {
valueElement=jQuery(this).parent().find('.mkdvalue');
defaultval=(jQuery(this).parent().attr('defaultval') !== 'undefined' && jQuery(this).parent().attr('defaultval') !== 'false' )?jQuery(this).parent().attr('defaultval'):jQuery(this).parent().attr('defaultval','0');
console.log(jQuery.isNumeric(parseInt(valueElement.val())))
if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
var increment=-1;
valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
});
jQuery('.mkdplus').bind('click', function() {
valueElement=jQuery(this).parent().find('.mkdvalue');
defaultval=(jQuery(this).parent().attr('defaultval') !== undefined && jQuery(this).parent().attr('defaultval') !== 'false' )?parseInt(jQuery(this).parent().attr('defaultval')):parseInt(jQuery(this).parent().attr('defaultval','0'));
console.log(jQuery.isNumeric(parseInt(valueElement.val())))
if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
var increment=1;
valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
});
jQuery('.mkdvalue').on('keyup', function () {
jQuery(this).val(jQuery(this).val().replace(/[^0-9]/gi, ''));
});
});
</script>
I've used bootstrap icons for the buttons but you can also hardcode - and + as it! ;-) Hope it will help others!
我已经为按钮使用了引导程序图标，但您也可以硬编码 - 和 + 作为它！;-) 希望它能帮助别人！
回答by Stephen
If anyone's looking to have more than 1 incrementing input field on a page.Checks to see if .plus or .minus is clicked then changes the value of the sibling input, so you can have as many fields as you like.
如果有人希望在页面上有 1 个以上的递增输入字段。检查 .plus 或 .minus 是否被单击，然后更改同级输入的值，因此您可以拥有任意数量的字段。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<div>
<a class="minus increment" href="#">-</a>
<input type="text" id="adults" size="10" value="0">
<a class="plus increment" href="#">+</a>
</div>
<div>
<a class="minus increment" href="#">-</a>
<input type="text" id="children" size="10" value="0">
<a class="plus increment" href="#">+</a>
</div>
<script type="text/javascript">
$(function(){
$('.increment').click(function() {
var valueElement = $('#'+$(this).siblings('input').attr('id'));
if($(this).hasClass('plus'))
{
valueElement.val(Math.max(parseInt(valueElement.val()) + 1));
}
else if (valueElement.val() > 0) // Stops the value going into negatives
{
valueElement.val(Math.max(parseInt(valueElement.val()) - 1));
}
return false;
});
});
</script>
回答by abubakkar tahir
this is easy and dynamic way to incrment and decrement value
这是增加和减少价值的简单而动态的方法
this is the html part
这是 html 部分
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" onclick="decrement(this);"><i class="la la-minus-
circle"></i></span></div>
<input type="text" class="form-control adults" value="0">
<div class="input-group-append">
<span class="input-group-text" onclick="increment(this);"><i class="la la-plus-
circle"></i></span></div></div>
this is the jquery part.
这是 jquery 部分。
function increment(obj)
{
var count = parseInt($(obj).parent().parent().find('input').val());
$(obj).parent().parent().find('input').val(count+1);
}
function decrement(obj)
{
var count = parseInt($(obj).parent().parent().find('input').val());
if(count != 0)
{
$(obj).parent().parent().find('input').val(count - 1);
}
}
