Question

我正在建立一个用户点击按钮并且分数增加的系统。有一个计数器，我想在单击按钮时增加使用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>

Answer 1

你不能在不是变量的东西上使用++，这将是你能得到的最接近的东西：

$('#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;
    });
}

Answer 2

$(document).ready(function() {
var count = 0;

  $("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
  }

});

<div id="counter"></div>

Answer 3

只是

var counter = 0;

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

Answer 4

上面的一些建议使用全局变量。这不是解决问题的好方法。计数特定于一个元素，您可以使用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的回调语法使代码更流畅，更快。

Answer 5

转到以下网站并试用。 http://www.counter12.com/

从上面的链接中我选择了一个我喜欢在我的网站上接受的设计项目，它给了我一个我在html页面粘贴的div。

它做得非常棒。

我没有在JQuery上回答您的问题，但为您的问题提供了替代解决方案。

Answer 6

您正在尝试在jQuery元素上设置“++”！

你可以声明一个js变量

var counter = 0;

并在jQuery代码中执行：

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

Answer 7

我将尝试以下方式。我已将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);
  }
});

然后，在脚本标签之外和身体中所需的位置，我将添加：

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

jQuery - 单击按钮时增加计数器的值

7 个答案: