jQuery的输入数量

Question

可能重复：
Is it possible to customize an input field for amounts with +- buttons?

如何使+（加号）和 - 用于

<input type="number" class="numbertype" value="10">（减）值按钮？

我认为这是可能使用jQuery或可能javascipt的简单的事，但我不知道如何..

我想要做这样的事情：当你推

+按钮，数值会变大为1（0,12,3,4,5,6 .... 10000）

当您按下 - 按钮时，数值会变小为1（10,9,8 ，7,6,5,4 ... 0）

Answer 1

$("#minus,#plus").click(function(){ 
    var value = parseInt($(".numbertype").val(), 10); 
    $(".numbertype").val(value + $(this).is("#minus") ? -1 : 1); 
}); 

---

我只是想看看怎么做我自己。这里有一个，将让鼠标下去拨动：

var i = null; 
var d = 0; 
var $numbertype = null; 

function ToggleValue() { 
    $numbertype.val(parseInt($numbertype.val(), 10) + d); 
} 

$(function() { 
    $numbertype = $(".numbertype"); 

    $("#minus,#plus").mousedown(function() { 
     d = $(this).is("#minus") ? -1 : 1; 
     i = setInterval(ToggleValue, 100); 
    }); 

    $("#minus,#plus").on("mouseup mouseout", function() { 
     clearInterval(i); 
    }); 
}); 

工作示例：http://jsfiddle.net/M4BAt/5/

Answer 2

您可以使用kendo.iu它具有更符合您的愿望的预定义控件。它非常易于实现，并且效果很好。我已经使用过它。没有抱怨。

http://demos.kendoui.com/web/numerictextbox/index.html

Answer 3

$('#plus_but').click(function(){ 

     var val = $('.numbertype').val(); 

     var new_val = parseInt($('.numbertype').val(),10) + 1 ; 

     $('.numbertype').val(new_val); 

}); 


$('#minus_but').click(function(){ 

     var val = $('.numbertype').val(); 

     var new_val = parseInt($('.numbertype').val(),10) - 1 ; 

     $('.numbertype').val(new_val); 

}); 

Answer 4

如果你替换你想要的加/减按钮的图像，这会工作：

<span class="plusminusunit"> 
    <span class="minus">-</span> 
    <input type="number" class="numbertype" value="10"> 
    <span class="plus">+</span> 
</span> 

$(".plus").click(function() { 
    var item = $(this).closest(".plusminusunit").find("input"); 
    item.val(Number(item.val()) + 1); 
}); 
$(".minus").click(function() { 
    var item = $(this).closest(".plusminusunit").find("input"); 
    item.val(Number(item.val()) - 1); 
}); 

工作例如：http://jsfiddle.net/jfriend00/FxEv3/

随着图像s，HTML看起来像这样（使用你的图片网址）：

<span class="plusminusunit"> 
    <img class="minus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png"> 
    <input type="number" class="numbertype" value="10"> 
    <img class="plus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png"> 
</span>