Question

所以我正在尝试使用jQuery创建一个计数器，但由于某种原因我不能让它工作。我正在使用3个输入。 1个数字输入和2个按钮。

我的HTML看起来像这样：

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

        <div id="title">
            <div id="middle">
                <div id="inner">Books</div> 
            </div>
        </div>

        <input class="counter" type="number" value="0"></input>

        <input class="red" type="submit" value="-"></input>
        <input class="green" type="submit" value="+"></input>

        <script type="text/javascript" src="jquery-1.11.10.min.js"></script>
        <script type="text/javascript" src="script.js"></script>

    </body>

</html>

这是我的jQuery代码：

$(document).ready(function(){

    var num = 0;

    $(".red").click(function(){
        num = $(".counter").val();
        num = num - 1;
        $(".counter").val(num);
    })

    $(".green").click(function(){
        num = $(".counter").val();
        num = num + 1;
        $(".counter").val(num);
    })

}

我似乎无法找到我的代码有什么问题。

Answer 1

这里我使用了+，强制引擎通过对它应用数学运算符来隐式转换它;

将输入值转换为数字

num = +$(".counter").val();

DEMO

此外，您缺少关闭文档就绪处理程序的)。

我还建议您使用type="button"代替type="submit"

Answer 2

它失败的原因是因为val()作为字符串返回，而+正在进行字符串连接，而不是添加。

但是，由于您已经将值存储在变量中，因此您每次都不需要从输入中提取值。这是一个更简单的版本：

http://jsfiddle.net/bcHWa/

var num = 0;

$(".red").click(function () {
    $(".counter").val(--num);
})

$(".green").click(function () {
    $(".counter").val(++num);
})

Answer 3

num = $(".counter").val();将是一个字符串，因此“1”+“1”=“11”

尝试：

 num = parseInt($(".counter").val());

如何使用jQuery创建计数器

3 个答案: