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

IT技术 javascript jquery button
2021-02-01 17:31:34

我正在制作一个系统，用户点击一个按钮，他们的分数就会增加。有一个计数器，我想在单击按钮时增加使用 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 中，++ 增加了某些东西的value。什么是 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>
6个回答

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

$('#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;
    });
}
这在演示中工作正常，但由于某种原因，它在我的页面上不起作用。事实上，没有一个答案是！有什么我想念的吗？
2021-03-23 17:31:34
@Marcus 考虑+val + 1而不是val * 1 + 1
2021-04-01 17:31:34
谢谢回复，关于AJAX的事情，怎么知道函数是否成功？另外， (i,val) 有什么作用？谢谢
2021-04-03 17:31:34
有关更多详细信息，请查看 AJAX的jQuery 文档。任何返回 HTTP 200 的请求都是“成功的”。jQuery 的html()方法可以接受一个回调，该回调传递两个值，即 jQuery 选择器中当前元素的索引，以及该元素i的当前 HTML 值val。再次查看jQuery 文档以获取更多信息。
2021-04-03 17:31:34
如果您只是复制并粘贴到您当前拥有的内容中，则几乎没有任何内容会起作用，因为您缺少 jQuery 的“就绪”功能 - $(document).ready
2021-04-11 17:31:34 
$(document).ready(function() {
var count = 0;

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

});

<div id="counter"></div>
您需要在触发任何 jQuery 代码之前添加文档就绪函数（上面编辑过）
2021-03-15 17:31:34

只是 

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使代码更加流畅和快速。

如果改变计数值的方法不止一种，则不正确
2021-03-19 17:31:34
@j3frea 然后将代码封装在插件中。老实说，这并不难做到，用全局变量乱扔代码是非常糟糕的设计。
2021-03-22 17:31:34
没有人使用全局变量，它们只是示例。任何答案中都没有说明上下文。
2021-04-01 17:31:34
不要忘记事先初始化计数器，否则它将不起作用： $('#counter').data('count', 0);
2021-04-07 17:31:34
@Sime 谢谢。我总是想在数学运算中undefined相等0......@Marcus 嗯，有些是。在这种情况下，约束上下文应该是答案的一个组成部分。
2021-04-07 17:31:34

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

从上面的链接中，我选择了我喜欢在我的网站接受的条款中使用的一种设计，它给了我一个 div，我已将其粘贴到我的 html 页面中。

它确实非常有效。

我不是在 JQuery 上回答您的问题，而是为您的问题提供替代解决方案。

其它你可能感兴趣的问题
上一篇如何从 $.getJSON 函数返回变量 下一篇如何解析一个 URL？