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

问题描述：

我想弄清楚如何在jQuery的click（）事件中创建的函数中存储外部变量值。以下是我现在使用的代码示例。如何在jQuery点击函数中存储局部变量？

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赋值给闭包的局部变量。 gid变量将在创建闭包的时候被赋值为i，而不是在函数运行时。

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

这确实对我有用。它是一个有趣的匿名函数。 – Geuis 2009-09-28 07:19:38

是吗？我对Javascript相当陌生，但是我的Greasemonkey脚本有很多JQuery循环，这似乎是处理函数的一种自然方式 – 2009-09-28 07:22:42

谢谢。我以前见过这种模式，第一次我碰到它是多么有用。 – 2013-06-16 23:10:52

答

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

由于JavaScript没有块作用域，你需要通过“我”到一个新的功能，所以它被复制按值到一个新的实例：

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

出于某种原因，我无法为我完成这项工作。我仍然遇到最初的问题。 – Geuis 2009-09-28 07:18:43

OMG，我真的误解了Javascript范围。它没有块范围。我已经编辑了我的答案，但您可以肯定地使用data（）方法 - 这是传递数据的更好方法。 – 2009-09-28 08:10:40

答

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

答

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]); 
    });

答

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

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

我觉得这比封闭式解决方案更易读，但这归功于品味。

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

相关推荐