jQuery - 单击按钮时增加计数器的值 [英] jQuery - Increase the value of a counter when a button is clicked
问题描述
我正在制作一个系统，用户点击一个按钮，他们的分数就会增加.有一个计数器，我想在单击按钮时增加使用 jQuery 的值(以便页面不需要刷新).
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.
我该怎么做?
<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 是按钮，#counter 是计数器.
#update is the button, #counter is the counter.
在 php 中，++ 增加了某些东西的价值.什么是 jQuery 等价物?
In php, ++ increases something's value. What's the jQuery equivalent?
另外，当按钮被点击时，它也需要发送一个更新mysql数据库中的score值的请求，而不会刷新页面.有谁知道我会怎么做?
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?
非常感谢
更新:
我尝试了以下几种方法，但似乎没有任何效果！我是否需要更改其他任何内容才能使其正常工作?我已经为它创建了一个测试页面:
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>
推荐答案
你不能在不是变量的东西上使用 ++，这将是你能得到的最接近的:
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 的 html() 方法可以获取和设置 HTML 值的一个元素.如果传递一个函数，它可以根据现有值更新 HTML.所以在你的代码上下文中:
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:
$("#update").click(function() {
$('#counter').html(function(i, val) { return +val+1 });
}
演示: http://jsfiddle.net/marcuswhybrow/zRX2D/2/
在将页面上的计数器与数据库中的计数器值同步时，永远不要相信客户端！您向服务器端脚本发送递增或递减信号，而不是一个连续的值，例如 10 或 23.
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.
但是，当您更改计数器的 HTML 时，您可以向服务器发送 AJAX 请求:
However you could send an AJAX request to the server when you change the HTML of your counter:
$("#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;
});
}
这篇关于jQuery - 单击按钮时增加计数器的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
