单击按钮时增加计数器值答案

【问题标题】：Increase counter value upon button click单击按钮时增加计数器值
【发布时间】：2013-07-14 14:06:06
【问题描述】：

我似乎无法获得工作所需的 jQuery 位。我以前从未使用过 jQuery，但我希望在我的页面上有一个按钮，当单击该按钮时，最初的 0 值会增加 1。我的问题类似于jQuery - Increase the value of a counter when a button is clicked 和press button and value increases in text box，但我无法理解我做错了什么。这是我所拥有的：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$("#update").click(function()
{
    $("#counter")++;
}
</script>
</head>
<body>

<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$('#AddButton').on('click', function ()
{
    var input = $('#TextBox');
    input.val(parseInt(input.val()) + 1);
})
</script>

</body>
</html>

非常感谢任何帮助。请原谅任何明显的明显错误，我还不知道该怎么做。谢谢你，祝你好消息！ =)

【问题讨论】：

元素update 和counter 在哪里？以及为什么包含两次 jquery？
$("#counter") 返回 ID 为“counter”的（包装的）DOM 元素的句柄。该元素可能具有可以递增的数字属性，但该元素本身不是数字，因此您不能递增它。
为什么要投反对票？好吧，有错误，但老实说，问答格式得到尊重，有代码......我们可以帮助引导人们理解和改善自己，毕竟这不就是STO的意义吗？跨度>

标签： javascript jquery

【解决方案1】：

很明显你是 jQuery 的新手，所以好好阅读可能会对你有所帮助，我会推荐 Head First jQuery。

至于问题，我重写了你的代码，应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title> My first increment </title>
    </head>
    <body>

        <input type="text" name="TextBox" id="TextBox" value="0" />
        <input type="Button" id='AddButton' value="+" />

        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#AddButton').click( function() {
                    var counter = $('#TextBox').val();
                    counter++ ;
                    $('#TextBox').val(counter);
                });
            });
        </script>
    </body>
</html>

这是一个小测试：test me

这个想法是增加一个变量而不是一个对象，你也有一些语法错误，但试试这个代码，我们可以在 cmets 上进一步讨论。

祝你好运。

【讨论】：

非常感谢，它有效！ :D 我会检查 Head First jQuery。有没有办法让所有看到页面的用户都保持价值？我是否必须以某种方式将其连接到数据库？
是的，我认为一旦您关闭页面（视图），计数器值就会丢失，除非您将其存储在数据库中。要使用 jQuery 连接到数据库，您必须使用 ajax :)

【解决方案2】：

（这只是对其他答案的补充）

您只需要在所有其他 js srcs 之前加载一次：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

那是一个非常旧的 jquery 版本。你可以找到最新的here。

几乎所有的 jQuery 代码都应该被包裹起来

$(document).ready(function(){

});

一直这样做，直到你找到一个不这样做的理由，这对于纯 jQuery 来说是罕见的。

假设$('#TextBox') 永远不会从最后一个计数器更改，您可能会喜欢：

$('#TextBox').val(0);
$('#AddButton').click( function() {
    $('#TextBox').val(parseInt($('#TextBox').val()) + 1);
});

但如果您希望用户更改TextBox，则只要点击AddButton，就将其设置回递增计数器，假设counter 应该从0 开始：

counter = 0;
$('#AddButton').click( function() {
    counter++;
    $('#TextBox').val(counter);
});

【讨论】：

this 将引用#AddButton，不是吗？
其实，你可以，但不是那个，它是++ 跟在$('#TextBox').val() 声明之后，由于某种原因它不喜欢它...这里试试这个jsfiddle.net/hsAsU/3 ，每次取消注释一段代码并注意区别。
@Gloserio 这太奇怪了，++ 不能内联完成。那是唯一不能的功能吗？哈哈。 +1 为您坚持初学者。我记得那些日子......
是的，++ 不起作用真的很奇怪。如果我找出原因，我会告诉你的。（确实是艰难的日子......）
stackoverflow.com/questions/17641480/…，看看这个！实际上，我们有点像瞎子……

【解决方案3】：

应该是：

var counter = 0;
$("#update").click(function()
{
    counter++;
});

这个here的演示。

如果 counter 是一个变量，您需要定义它 (var counter;)，而您也忘记关闭单击“)”。注意最后额外的)。你正在做的是增加一个 jQuery 对象（解释 Ohgodwhy 的好主意）。

如果您想要将值放在另一个字段中（现在我猜了一下），例如输入字段，您可以这样做：

var val;
$("#update").click(function()
{
   val = $('#counter').val();
   val++;
   $('#counter').prop('value',val )
});

这个here的演示。

【讨论】：

而这样做的原因是你不能增加一个 jQuery 对象，这是 OP 正在做的。

【解决方案4】：

这可以使用纯html和JS来完成，附上下面的代码

<b>
<button id="btn" onclick="this.innerHTML=++this.value" value=0 >0</button>
</b>

【讨论】：