jQuery 单击按钮时增加计数器值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17640091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increase counter value upon button click
提问by Katie Jurek
I cannot seem to get the jQuery bit I need to work. I've never used jQuery before, but I'd like to have a button on my page that, when clicked, increments an initially 0 value by one. My question is similar to jQuery - Increase the value of a counter when a button is clickedand press button and value increases in text boxbut I can't make sense of what I'm doing wrong. Here's what I have:
我似乎无法获得我需要工作的 jQuery 位。我以前从未使用过 jQuery，但我想在我的页面上有一个按钮，当单击该按钮时，最初的 0 值会增加 1。我的问题类似于jQuery - 单击按钮时增加计数器的值并按下按钮，文本框中的值增加，但我无法理解我做错了什么。这是我所拥有的：
<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>
Any help is greatly appreciated. Please forgive any huge glaring mistakes, I have no idea how to do any of this yet. Thank you, and happy tidings! =)
任何帮助是极大的赞赏。请原谅任何巨大的明显错误，我还不知道如何做到这一点。谢谢你，喜讯！=)
回答by Akheloes
It's clear you're new to jQuery, so a good read might be of help to you, I would recommand Head First jQuery.
很明显你是 jQuery 的新手，所以好好阅读可能对你有帮助，我会推荐Head First jQuery。
As for the question, I rewrote your code, here's what it should be like :
至于问题，我重写了你的代码，它应该是这样的：
<!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>
Here is a little test : test me
这是一个小测试：测试我
The idea is to increment a variable not an object, and you have some syntax mistakes as well, but try this code and we can discuss it further on comments.
这个想法是增加一个变量而不是一个对象，你也有一些语法错误，但试试这段代码，我们可以在注释中进一步讨论它。
Best of luck.
祝你好运。
回答by Akheloes
(This is merely a supplement to other answers)
（这只是对其他答案的补充）
You only need to load this once beforeall other js srcs:
您只需要在所有其他 js之前加载一次src：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
That's a really old jquery version. You can find the latest here.
那是一个非常旧的jquery 版本。你可以在这里找到最新的。
Almost all jQuery code should be wrapped in
几乎所有的 jQuery 代码都应该被包裹起来
$(document).ready(function(){
});
Do it all of the time until you find a reason not to which is rare for pure jQuery.
一直这样做，直到你找到一个不这样做的原因，这对于纯 jQuery 来说是罕见的。
Assuming $('#TextBox')can never be changed from the last counter, you might like:
假设$('#TextBox')永远不能从最后一个计数器更改，您可能会喜欢：
$('#TextBox').val(0);
$('#AddButton').click( function() {
$('#TextBox').val(parseInt($('#TextBox').val()) + 1);
});
but if you want TextBoxto be changed by the user then set back to the incrememented counter whenever AddButton's clicked, assuming countershould start at 0:
但是，如果您想TextBox由用户更改，则在AddButton单击时将其设置回增量计数器，假设counter应从 开始0：
counter = 0;
$('#AddButton').click( function() {
counter++;
$('#TextBox').val(counter);
});
回答by Sergio
It should be:
它应该是：
var counter = 0;
$("#update").click(function()
{
counter++;
});
Demo for this here.
演示在这里。
If counter is a variable you need to define it (var counter;) and you forgot also to close the click ")". Notice the extra )in the end. What you were doing was increment a jQuery object (good idea to explain Ohgodwhy).
如果 counter 是一个变量，您需要定义它 ( var counter;) 并且您也忘记关闭单击“)”。注意最后的额外内容)。你正在做的是增加一个 jQuery 对象（解释 Ohgodwhy 的好主意）。
In case what you want is to put the value in another field (and now I am guessing a bit), like an input field, you can do this:
如果您想要将值放在另一个字段中（现在我有点猜测），例如输入字段，您可以这样做：
var val;
$("#update").click(function()
{
val = $('#counter').val();
val++;
$('#counter').prop('value',val )
});
Demo for this here.
演示在这里。
回答by Jithendranath Gupta
This can be done using plain html and JS, Attaching the code below
这可以使用普通的 html 和 JS 来完成，附上下面的代码
<b>
<button id="btn" onclick="this.innerHTML=++this.value" value=0 >0</button>
</b>
