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

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

javascript jquery button

Javascript jQuery-单击按钮时增加计数器的值,javascript,jquery,button,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() { $(

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


$（“#更新”）。单击（函数（）{
$（“#计数器”）+；
}

#更新是按钮，#计数器是计数器

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


var计数=0；
$（“#更新”）。单击（函数（）{
计数++；
$（“#counter”）.html（“我当前的计数是：”+count）；
}
按钮
1.

$（文档）.ready（函数（）{
var计数=0；
$（“#更新”）。单击（函数（）{
计数++；
$（“#counter”）.html（“我当前的计数是：”+count）；
}
});

您不能对非变量的内容使用

++

，这将是最接近您所能得到的：

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

jQuery的方法可以获取和设置元素的HTML值。如果传递了一个函数，它可以根据现有值更新HTML。因此，在代码的上下文中：

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

演示：

当涉及到将页面上的计数器与数据库中的计数器值同步时，永远不要信任客户端！您向服务器端脚本发送递增或递减信号，而不是连续值，如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;
    });
}

只是

var counter = 0;

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

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

您可以声明一个js变量

var counter = 0;

在jQuery代码中，执行以下操作：

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

上面的一些建议使用全局变量。这不是解决问题的好方法。计数特定于一个元素，您可以使用jQuery函数将数据项绑定到元素：

$('#counter').data('count', 0);
$('#update').click(function(){
    $('#counter').html(function(){
        var $this = $(this),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    });
});

还请注意，这使用的回调语法使代码更加流畅和快速。

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

到下面的站点进行试用。

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

它确实发挥了惊人的作用

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

你应该创建一个全局变量？真的吗？；）而不是“你必须”。最好是“你可以”。来吧，有几种方法可以做到这一点，我的，这只是一个建议！是的，“你可以”是这里的正确形式。“你应该”是建议。没有人应该建议创建全局变量，这里的建议正好相反：应该尽量避免创建全局变量。你完全正确！“全局”这个词是我的错；）如果有不止一种方法可以改变count@j3frea然后将代码封装在插件中。老实说，这并不难做到，将全局变量乱扔在代码中是非常糟糕的设计。没有人使用全局变量，它们只是示例。任何答案中都没有说明上下文。别忘了初始化请预先设置计数器，否则它将不起作用：

$（“#counter”）.data（'count'，0）

@Sime谢谢。在数学运算中，我总是希望

未定义的等于0
。@Marcus好吧，有些是。在这种情况下，约束上下文应该是答案的一个组成部分。#counter就是计数器：它是包含数字的元素还是什么？是的，#counter是带数字的divinside@Taimur你的代码无效。请使用}结束您的单击功能而不仅仅是}
。演示：我试过了，我也试过复制和粘贴你的第二个演示，但它不起作用：（如果有帮助的话，我正在使用WAMP服务器，测试页面是一个.php页面，但我很确定这并不重要。我不知道您是否解决了问题，但您必须将代码打包到文档就绪处理程序中。目前jQuery找不到ID为#button
的元素，因为它尚未解析。请将代码放入$（function（）{your code here}）；
（以及前面提到的缺少的）；
在单击处理程序传递的末尾。您拥有的是$（..）。单击（…
，但您需要$（..）。单击（…）；
）。这在演示中效果很好，但由于某些原因，它在我的页面上不起作用。事实上，没有一个答案是！有什么我遗漏的吗？谢谢你的回复，关于AJAX的事情，它如何知道函数是否成功？还有，（I，val）做Thanks@Marcus考虑<代码> + Val+1 < /C> >而不是<代码> Val* 1 + 1 查看更多细节。任何用HTTP 200返回的请求都是“成功的”。jQuery的<代码> HTML*（）
方法可以接受一个回调，该回调通过两个值传递：jQuery选择器中当前元素的索引i
，以及该元素的当前HTML值val。再次查看。如果您只是复制并粘贴到您当前拥有的内容中，几乎所有内容都无法工作，因为您缺少jQuery的“就绪”函数-$（document）.ready您需要在触发任何jQuery代码之前添加documentready函数（上面编辑）
<div id="counter1"></div>