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

【问题标题】：jQuery - Increase the value of a counter when a button is clickedjQuery - 单击按钮时增加计数器的值
【发布时间】：2011-06-09 17:41:28
【问题描述】：

我正在制作一个系统，用户点击一个按钮，他们的分数就会增加。有一个计数器，我想在单击按钮时增加使用 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>

【问题讨论】：

#counter 是计数器：它是一个包含数字的元素还是什么？
是的，#counter 是一个 div，里面有一个数字
@Taimur 您的代码无效。使用}); 而不仅仅是} 结束您的点击功能。 演示： jsfiddle.net/marcuswhybrow/Bwdfw
我试过了，我也试过复制和粘贴你的第二个演示内容，但它不起作用:(如果有帮助，我正在使用 WAMP 服务器，测试页面是 .php页面，但我很确定这无关紧要
不知道您是否解决了问题，但您必须将代码包装到文档就绪处理程序中。目前 jQuery 没有找到 ID 为 #button 的元素，因为它还没有被解析。将您的代码放入$(function(){ your code here });。（并且已经提到在您的点击处理程序传递结束时缺少);。您拥有的是$(..).click(...，但您需要$(...).click(...);）。

标签： javascript jquery button

【解决方案1】：

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

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

});

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

【讨论】：

您需要在触发任何 jQuery 代码之前添加文档准备功能（上面已编辑）

【解决方案2】：

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

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

【讨论】：

这在演示中运行良好，但由于某种原因，它在我的页面上不起作用。事实上，没有一个答案是！有什么我想念的吗？
谢谢回复，关于AJAX的事情，怎么知道函数是否成功？另外， (i,val) 有什么作用？谢谢
@Marcus 考虑使用+val + 1 而不是val * 1 + 1
查看jQuery docs for AJAX 了解更多详情。任何返回 HTTP 200 的请求都是“成功的”。 jQuery 的html() 方法可以接受一个回调，该回调传递两个值，即jQuery 选择器i 中当前元素的索引，以及该元素的当前HTML 值val。再次查看jQuery docs for more information。
如果您只是复制并粘贴到您当前拥有的内容中，几乎所有这些都不会起作用，因为您缺少 jQuery 的“就绪”功能 - $(document).ready

【解决方案3】：

只是

var counter = 0;

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

【讨论】：

【解决方案4】：

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

你可以声明一个js变量

var counter = 0;

在 jQuery 代码中：

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

【讨论】：

你应该创建一个全局变量吗？真的吗？
“你应该” ;) 不是“你必须” .. 最好是“你可以” .. 有几种方法可以做到这一点，我的只是一个建议！跨度>
是的，“你可以”在这里是正确的形式。 “你应该”是为了推荐。没有人应该建议创建全局变量，这里的建议是相反的：应该尽量避免创建全局变量。
你说得对！ “全球”这个词是我的错；）我道歉

【解决方案5】：

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

【讨论】：

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

【解决方案6】：

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

【讨论】：

【解决方案7】：

访问以下站点并试用。 http://www.counter12.com/

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

它确实非常有效。

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

【讨论】：