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>