如何在 jQuery 点击函数中存储局部变量？

Question

我试图弄清楚如何在 jQuery 的 click() 事件期间创建的函数中存储外部变量值。这是我现在正在使用的代码示例。

for(var i=0; i<3; i++){
    $('#tmpid'+i).click(function(){
        var gid = i;
        alert(gid);
    });
}

<div id="tmpid0">1al</div>
<div id="tmpid1">asd</div>
<div id="tmpid2">qwe</div>

因此，发生的情况是事件正确附加，但“gid”的值始终是“i”的最后一个递增值。我不确定在这种情况下如何设置私有变量。

Answer 1

您可以创建一个闭包并将 i 分配给该闭包的局部变量。然后，在创建闭包时而不是在函数运行时，为 gid 变量分配 i 的值。

for(var i=0; i<3; i++){
    (function() {
        var gid = i;
        $('#tmpid'+i).click(function(){
            alert(gid);
        });
    })();
}

Answer 2

for(var i=0; i<3; i++){
    $('#tmpid'+i).click((function(gid){
        return function(){
             alert(gid);
        }
    })(i));
}

有很多方法可以做到这一点，这个方法很有效而且看起来很简单。

另一种方式编辑

：

for(var i=0; i<3; i++){
    $('#tmpid'+i).click([i],function(e){
        alert(e.data[0]);
    });

Answer 3

您已经创建了一个闭包，其中变量“i”在多个单击处理程序之间共享。

由于 Javascript 没有块作用域，因此您需要将“i”传递给新函数，以便将其按值复制到新实例：

function bindStuff(i) {
    $('#tmpid'+i).click(function(e){
                    var gid = i;
                    alert(gid);
            });
}

for(var i=0; i<3; i++){ bindStuff(i); }

这是另一个类似的问题：
循环内的 JavaScript 闭包 - 简单的实际示例

Answer 4

或者，jQuery 的单击（或绑定）的第一个参数是一个作为数据附加到事件的对象。

for(var i=0; i<3; i++){
    $('#tmpid'+i).click({gid : i}, function(e) {
        alert(e.data.gid);
    });
}

我发现这比闭包解决方案更具可读性，但这取决于品味。

Answer 5

我重新阅读了 jQuery 的本机 data() 方法。我实现了这个并且它也有效。它隐藏了如何处理闭包的一些实际功能，但其实现起来简单且非常干净。