Tai*_*mur 32 javascript jquery button
我正在制作一个用户点击按钮并且分数增加的系统.有一个计数器,我想在单击按钮时增加使用jQuery的值(以便页面不需要刷新).
我该怎么做？
<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是计数器.
在PHP中,++增加了某些东西的价值.什么是jQuery等价物？
此外,当单击该按钮时,它还需要发送一个请求,该请求也会更新mysql数据库中的得分值,而不会刷新页面.有谁知道我会怎么做？
非常感谢
更新:
我尝试过以下几种方法,但似乎没有任何效果!我需要更改其他任何内容吗？我为它创建了一个测试页面:
<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>
Mar*_*row 57
你不能使用++不是变量的东西,这将是你能得到的最接近的东西:
$('#counter').html(function(i, val) { return +val+1 });
jQuery的html()方法可以获取和设置元素的HTML值.如果传递了一个函数,它可以根据现有值更新HTML.所以在你的代码的上下文中:
$("#update").click(function() {
$('#counter').html(function(i, val) { return +val+1 });
}
演示: http ://jsfiddle.net/marcuswhybrow/zRX2D/2/
在同步页面上的计数器与数据库中的计数器值时,永远不要相信客户端!您向服务器端脚本发送递增或递减信号,而不是连续值,如10或23.
但是,当您更改计数器的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;
});
}
jpe*_*pea 18
$(document).ready(function() {
var count = 0;
$("#update").click(function() {
count++;
$("#counter").html("My current count is: "+count);
}
});
<div id="counter"></div>
Vad*_*dim 10
只是
var counter = 0;
$("#update").click(function() {
counter++;
});
上面的一些建议使用全局变量.这不是解决问题的好方法.计数特定于一个元素,您可以使用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;
});
});
另请注意,这使用回调语法html使代码更流畅,更快速.
| 归档时间： |
|
| 查看次数： |
190108 次 |
| 最近记录： |