Javascript jQuery - 单击按钮时增加计数器的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4701349/
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
jQuery - Increase the value of a counter when a button is clicked
提问by Taimur
I'm making a system where a user clicks a button and their score increases. There is a counter which I would like to increase the value of using jQuery (so that the page does not need to refresh) when the button is clicked.
我正在制作一个系统，用户点击一个按钮，他们的分数就会增加。有一个计数器，我想在单击按钮时增加使用 jQuery 的值（以便页面不需要刷新）。
How would I go about this?
我该怎么办？
<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>
#update is the button, #counter is the counter.
#update 是按钮，#counter 是计数器。
In php, ++ increases something's value. What's the jQuery equivalent?
在 php 中，++ 增加了某些东西的价值。什么是 jQuery 等价物？
Also, when the button is clicked, it needs to send a request which updates the score value in a mysql database as well, without the page refreshing. Does anyone know how I would do that?
此外，当按钮被点击时，它需要发送一个请求来更新 mysql 数据库中的分数值，而无需刷新页面。有谁知道我会怎么做？
Thanks a lot
非常感谢
UPDATE:
更新：
I've tried a few of the methods below, but nothing seems to work! Do I need to change anything else for it to work? I've created a test page for it:
我已经尝试了以下几种方法，但似乎没有任何效果！我是否需要更改其他任何内容才能使其正常工作？我为它创建了一个测试页面：
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
var count = 0;
$("#update").click(function() {
count++;
$("#counter").html("My current count is: "+count);
}
</script>
<button id="update" type="button">Button</button>
<div id="counter">1</div>
</body>
</htlm>
回答by Marcus Whybrow
You cannot use ++on something which is not a variable, this would be the closest you can get:
你不能++在不是变量的东西上使用，这将是你能得到的最接近的：
$('#counter').html(function(i, val) { return +val+1 });
jQuery's html()method can get and set the HTML value of an element. If passed a function it can update the HTML based upon the existing value. So in the context of your code:
jQuery 的html()方法可以获取和设置元素的 HTML 值。如果传递一个函数，它可以根据现有值更新 HTML。所以在你的代码上下文中：
$("#update").click(function() {
$('#counter').html(function(i, val) { return +val+1 });
}
DEMO:http://jsfiddle.net/marcuswhybrow/zRX2D/2/
演示：http : //jsfiddle.net/marcuswhybrow/zRX2D/2/
When it comes to synchronising your counter on the page, with the counter value in your database, never trust the client!You send either an increment or decrement signal to you server side script, rather than a continuous value such as 10, or 23.
在将页面上的计数器与数据库中的计数器值同步时，永远不要相信客户端！您向服务器端脚本发送增量或减量信号，而不是连续值，例如 10 或 23。
However you could send an AJAX request to the server when you change the HTML of your counter:
但是，当您更改计数器的 HTML 时，您可以向服务器发送 AJAX 请求：
$("#update").click(function() {
$('#counter').html(function(i, val) {
$.ajax({
url: '/path/to/script/',
type: 'POST',
data: {increment: true},
success: function() { alert('Request has returned') }
});
return +val+1;
});
}
回答by jpea
$(document).ready(function() {
var count = 0;
$("#update").click(function() {
count++;
$("#counter").html("My current count is: "+count);
}
});
<div id="counter"></div>
回答by Vadim
It's just
只是
var counter = 0;
$("#update").click(function() {
counter++;
});
回答by lonesomeday
Several of the suggestions above use global variables. This is not a good solution for the problem. The count is specific to one element, and you can use jQuery's datafunction to bind an item of data to an element:
上面的一些建议使用全局变量。这不是解决问题的好方法。计数特定于一个元素，您可以使用 jQuery 的data函数将一项数据绑定到一个元素：
$('#counter').data('count', 0);
$('#update').click(function(){
$('#counter').html(function(){
var $this = $(this),
count = $this.data('count') + 1;
$this.data('count', count);
return count;
});
});
Note also that this uses the callback syntax of htmlto make the code more fluent and fast.
另请注意，这使用了 的回调语法html使代码更加流畅和快速。
回答by Anil
Go to the below site and tryout. http://www.counter12.com/
转到以下站点并进行试用。 http://www.counter12.com/
From the above link I have selected the one design that I liked to have in my site accepted terms and it has given me a div that I have pasted in my html page.
从上面的链接中，我选择了我喜欢在我的网站接受的条款中使用的一种设计，它给了我一个 div，我已将其粘贴到我的 html 页面中。
It did awesomely worked.
它确实非常有效。
I am not answering to your problem on JQuery, but giving you an alternate solution for your problem.
我不是在 JQuery 上回答您的问题，而是为您的问题提供替代解决方案。
回答by Max West
I'm going to try this the following way. I've placed the count variable inside the "onfocus" function so as to keep it from becoming a global variable. The idea is to create a counter for each image in a tumblr blog.
我将通过以下方式尝试此操作。我已将 count 变量放在“onfocus”函数中，以防止它成为全局变量。这个想法是为 tumblr 博客中的每个图像创建一个计数器。
$(document).ready(function() {
$("#image1").onfocus(function() {
var count;
if (count == undefined || count == "" || count == 0) {
var count = 0;
}
count++;
$("#counter1").html("Image Views: " + count);
}
});
Then, outside the script tags and in the desired place in the body I'll add:
然后，在脚本标签之外和正文中所需的位置，我将添加：
<div id="counter1"></div>
回答by stecb
You are trying to set "++" on a jQuery element!
您正在尝试在 jQuery 元素上设置“++”！
YOu could declare a js variable
你可以声明一个js变量
var counter = 0;
and in jQuery code do:
并在 jQuery 代码中执行以下操作：
$("#counter").html(counter++);
