程序员经验分享-hwhale

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

2023-12-06

我正在制作一个系统，用户单击按钮，他们的分数就会增加。有一个计数器，我想在单击按钮时增加使用 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 数据库中的分数值，而不需要刷新页面。有谁知道我会怎么做？

多谢

UPDATE:

我尝试了以下几种方法，但似乎没有任何效果！我需要更改其他任何内容才能使其正常工作吗？我为它创建了一个测试页面：

<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').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;
    });
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

Button

jQuery - 单击按钮时增加计数器的值 的相关文章