jQuery – 单击button时增加计数器的值

我正在做一个系统,用户点击一个button,他们的分数增加。 有一个计数器,我想增加使用jQuery的价值(使页面不需要刷新),当button被点击。

我将如何去做这件事?

<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是button,#counter是计数器。

在PHP中,++增加了一些东西的价值。 什么是jQuery的等价物?

另外,点击button时,还需要发送一个更新mysql数据库分值的请求,而不需要刷新页面。 有谁知道我会怎么做?

非常感谢

更新:

我已经尝试了下面的一些方法,但似乎没有任何工作! 我需要改变任何其他的工作? 我为它创build了一个testing页面:

 <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> 

你不能在一个不是variables的东西上使用++ ,这将是最接近你可以得到的:

 $('#counter').html(function(i, val) { return +val+1 }); 

jQuery的html()方法可以获取和设置元素的HTML值。 如果传递一个函数,它可以根据现有值更新HTML。 所以在你的代码中:

 $("#update").click(function() { $('#counter').html(function(i, val) { return +val+1 }); } 

DEMO: 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; }); } 
 $(document).ready(function() { var count = 0; $("#update").click(function() { count++; $("#counter").html("My current count is: "+count); } }); <div id="counter"></div> 

只是

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

上面的几个build议使用全局variables。 这不是一个好的解决scheme。 count只针对一个元素,你可以使用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的callback语法来使代码更stream畅,更快速。

去下面的网站和试用。 http://www.counter12.com/

从上面的链接我select了我喜欢在我的网站上有一个devise接受条款,它给了我一个div,我已经粘贴在我的HTML页面。

它真的工作。

我没有回答你在JQuery上的问题,但给你一个替代解决scheme,为您的问题。

你正试图在jQuery元素上设置“++”!

你可以声明一个jsvariables

 var counter = 0; 

并在jQuery代码做:

 $("#counter").html(counter++); 

我将尝试以下方法。 我已经把countvariables放在“onfocus”函数中,以防止它成为一个全局variables。 这个想法是为tumblr博客中的每个图像创build一个计数器。

 $(document).ready(function() { $("#image1").onfocus(function() { var count; if (count == undefined || count == "" || count == 0) { var count = 0; } count++; $("#counter1").html("Image Views: " + count); } }); 

然后,在脚本标签之外,并在身体的所需位置,我将添加:

 <div id="counter1"></div>