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 closure inside loops – simple practical example

Answer 4

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

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

我觉得这比封闭解决方案更具可读性，但它归结为品味。

Answer 5

我回读了jQuery的native data（）方法。我实现了它，它也可以。它隐藏了一些关于如何处理闭包的实际功能，但它的实现简单而且非常干净。

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

5 个答案: