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

【问题标题】：How to store local variables in jQuery click functions?如何在 jQuery 点击函数中存储局部变量？
【发布时间】：2010-12-01 22:17:15
【问题描述】：

我试图弄清楚如何在 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”的最后一个递增值。我不确定在这种情况下如何设置私有变量。

【问题讨论】：

标签： jquery variables loops closures

【解决方案1】：

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

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

我发现这比闭包解决方案更具可读性，但归根结底。

【讨论】：

【解决方案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]);
    });

【讨论】：

【解决方案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

【讨论】：

由于某种原因，我无法为我完成这项工作。我仍然遇到原来的问题。
天啊，我真的误解了 Javascript 范围。它没有块作用域。我已经编辑了我的答案，但你绝对可以使用 data() 方法——这是一种更好的传递数据的方法。

【解决方案4】：

我回顾了 jQuery 的原生 data() 方法。我实现了这一点，它也可以工作。它隐藏了如何处理闭包的一些实际功能，但它的实现简单且非常干净。

【讨论】：

【解决方案5】：

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

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

【讨论】：

这对我有用。它是匿名函数的一个有趣用途。
是吗？我对 Javascript 还很陌生，但是我的 Greasemonkey 脚本有很多 JQuery 循环，这似乎是处理函数的自然方式
谢谢。我以前见过这种模式，我第一次真正意识到它有多么有用。
太棒了！非常感谢