Question

我正在尝试增加按钮点击次数的值。如果只有一个按钮，这很容易，但如果有多个按钮，我会对如何跟踪计数感到困惑。这看起来更具挑战性，因为在页面加载之前我不知道有多少按钮计数需要跟踪。最终目标是在单个页面上构建多个AJAX分页方案（从我的数据库中按顺序加载旧的列表项，并特定于单击的项目。）

这里是JSFiddle（下面是它的JS和HTML）我已经开始了解：http://jsfiddle.net/trpeters1/menAX/6/

JS：

var cnt=function(id){ //this code is incomplete but hopefully you'll get the idea of what i'm trying to do...
var j=0;
for(var i=0; i>100; i++){
    if(id[i]==i) j+=5;
}
    return j;
};

$('button').click(function(){  
   var id=this.id;
   var c=cnt(id); //something which will return the current increment value of the button that was clicked 
   $('#'+id+'div').append(c+'message'+id+'<br>');
});

HTML：

<button type="button" id="btn1">1</button><div id="btn1div"></div>
<button type="button" id="btn2">2</button><div id="btn2div"></div>
<button type="button" id="btn3">3</button><div id="btn3div"></div>

此代码的问题是单击每个按钮会输出相同的消息。理想情况下，代码可以跟踪被点击的每个按钮。我认为这可能有用的方法是将每个按钮的id与自己的计数器绑定（可能需要多个j计数器？）。

想法？

Answer 1

您可以使用jQuery的.data() method：

为每个按钮存储一个计数器

$('button').click(function(){

    var $this = $(this),
        c = $this.data('count'); // get count for current button
    if (!c) c = 0;               // if not defined yet set to 0
    c++;                         // increment count
    $this.data('count',c);       // save updated count

    // Do something with c here
});

演示：http://jsfiddle.net/menAX/8/

Answer 2

这样的东西？

$('button').click(function() {
    var $elem = $('#'+ this.id +'div');
    var c = $elem.children().length;
    $elem.append(c + 'message' + id + '<br>');
});

http://jsfiddle.net/hZHW3/

Answer 3

对于可能碰巧遇到同样问题的人来说，这里重复一遍，这就是我如何解决问题的方法。它依赖于使用匿名对象，它在Javascript中的工作方式类似于字典/映射/哈希表。第一次按下按钮时，该属性不存在，因此它被初始化为1，然后递增。

This works for me：

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var counter = {};
$(function() {

    $('button').click(function(){  
        var id=this.id;
        if (counter.hasOwnProperty(id)) {
            counter[id] += 1;
        } else {
            counter[id] = 1;
        }
        var c= counter[id];
        $('#'+id+'div').append(c+' message '+id+'<br>');
    });
});
</script>
</head>
<body>
<button type="button" id="btn1">1</button><div id="btn1div"></div>
<button type="button" id="btn2">2</button><div id="btn2div"></div>
<button type="button" id="btn3">3</button><div id="btn3div"></div>
</body>
</html>

单个页面上的多个分页和递增值（Javascript）

3 个答案: