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

Posted 2023-02-22

【中文标题】如何在 jQuery 点击函数中存储局部变量？

【英文标题】：How to store local variables in jQuery click functions?

【发布时间】：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”的最后一个递增值。我不确定在这种情况下如何设置私有变量。

【参考方案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 循环，这似乎是处理函数的自然方式

谢谢。我以前见过这种模式，我第一次真正意识到它有多么有用。

太棒了！非常感谢