jquery输入数字[重复]答案

【问题标题】：jquery input number [duplicate]jquery输入数字[重复]
【发布时间】：2012-02-02 13:15:06
【问题描述】：

可能重复：
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)

【问题讨论】：

标签： jquery html types input numbers

【解决方案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/

【讨论】：

别忘了传递基数！我为你修好了这个猎人！
其实这是错误的。您必须在变量前使用运算符“++”和“--”：$("numbertype").val(++value)
是的，在你发帖之前就知道了

【解决方案2】：

$('#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); 

});

【讨论】：

@Daniel 你就像 parseInt() 基数参数的 Johnny Appleseed

【解决方案3】：

如果你用你想要的图片代替加号/减号按钮，这会起作用：

<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/

使用图片，HTML 看起来像这样（使用您的图片 URL）：

<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>

【讨论】：

我试过这个，但它也不起作用..
@RobertasPalinskis - 你尝试了什么，因为它在 jsFiddle 中运行良好？
看这里pastebin.com/58T4Mw5b
将图像放在 span 中会使 .parent() 引用获得错误的父级。您可以将 HTML 更改为在额外跨度内不包含 img，也可以更改为我现在编辑的答案，在容器上放置一个类并使用 .closest() 而不是 .parent() 来获得顶部无论是否有额外的跨度，容器的。我在编辑后的答案中提供了这两种选择。
我不知道，为什么，但我 jsfiddle 它正在工作，但在我的 html 中却没有..

【解决方案4】：

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

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

【讨论】：