带有 jQuery 和 Javascript 的 for 循环内的函数答案

【问题标题】：A function inside a for loop with jQuery and Javascript带有 jQuery 和 Javascript 的 for 循环内的函数
【发布时间】：2012-09-10 08:31:31
【问题描述】：

我有以下代码：

$(document).ready(function () {
    for (i = 1; i <= number_of_banners; i++) {
    var selector = "#link_" + i;
    $(selector).click(function () {
        alert(i);
        });
    }
});

但 alert() 无法从 for 循环中获取“i”变量。如何在 .click 函数中使用 for 循环的 i 变量？

【问题讨论】：

一个经典的:) 我想这在 SO 上已经被问了十几次了。
您遇到的问题是 .click() 处理程序正在使用 for 循环中的 i 变量 - 但它们都引用相同的，live i 变量，当点击发生时，for 循环已经完成，i 等于 number_of_banners。（只有一打@Christoph？本月可能至少有十几个......）
Assign click handlers in for loop 的可能重复项

标签： javascript jquery web nested scope

【解决方案1】：

我认为你可以将它作为参数传递给匿名函数，只要该函数是在可以访问 i 的范围内声明的。

function (i) {
   alert(i);
}

【讨论】：

那行不通：该函数是单击处理程序的回调，而 jQuery 在调用该函数时不知道传递该 i 值。
@nnn 如果他将 func 放在处理程序绑定周围而不是内部，它可能会起作用。

【解决方案2】：

一个快速的解决方案是使用 eventData 并将当前的 i 存储在其中：

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).bind('click', i, function (e) {
            alert(e.data);
        });
    }
});

如果您使用的是 jquery 1.7+，则使用 on 而不是 bind

【讨论】：

您还可以为您的横幅分配一个类并将监听器绑定到该类！我喜欢 jQuery！ :D
@nmenego 是的，但是作者有 id。

【解决方案3】：

使用 jQuery .on(event, data, handler) 你可以轻松做到。

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).on('click', {id: i}, function (e) {
            alert(e.data.id);
        });
    }
});

Working sample

【讨论】：

【解决方案4】：

这可能是由于~~JavaScript hoisting~~ JavaScript 作用域机制的原因吗？？

例如：

example of wrong loop variable binding

不起作用，因为 JavaScript 使用 function scope 而不是 block scope，因为我们通常习惯于其他语言，如 Java 和 C#。为了使它工作，必须通过显式创建一个新的匿名函数来创建一个新的作用域，然后绑定相应的变量：

example of correct loop variable binding

我知道这并不能直接回答上面的问题，但对于其他遇到这个问题的人来说可能仍然有用。

【讨论】：

这不是一个提升问题，您链接到的文章中讨论的范围问题也没有真正涵盖它。这更像是一个关闭问题（请注意，尽管i 在问题中是全局的），并且您的第二个小提琴说明了使其工作的一种方法-您为什么不更新答案以谈论 why 有用吗？
@nnnnnn Uhps，对不起，你是对的。正如我刚刚快速发布此答案时，我错误地添加了提升内容，正如您正确提到的，这当然是一个范围界定问题（由于 JavaScript 函数而不是块范围）。我会更新我的答案
+1 用于变量绑定的第二个示例......虽然提到提升的答案不应该在任何地方都有 var 语句，但在函数的第一行;)

【解决方案5】：

您可以使用此代码：

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).on('click', {id: i}, function (e) {
            alert(e.data.id);
        });
    }
});

您应该使用on 方法并在其中使用click 参数，而不是使用onclick 方法

【讨论】：