javascript - Uncaught ReferenceError : i is not defined

Question

我正在尝试基于我的数组创建一个 for 循环

var lists = [ "a", "b", "c", "d"];

---

JS

for ( i = 0; i < lists.length; i++) {

    // console.log(lists[i]);

    $(".sa-report-btn-"+lists[i] ).click(function () {
        $(".sa-hide-"+lists[i]).removeClass("hidden");
        $(".sa-report-"+lists[i]).addClass("hidden");
    });

    $(".sa-hide-btn-"+lists[i]).click(function () {
        $(".sa-hide-"+lists[i]).addClass("hidden");
        $(".sa-report-"+lists[i]).removeClass("hidden");
    });
}

我做得对吗？我得到了 Uncaught ReferenceError: i is not defined我可以像这样用我的 jQuery 选择器连接每个循环 --> $(".sa-hide-"+lists[i]) 吗？只是好奇...

Answer 1

首先，听起来您正在使用严格模式——很好!它使您免于成为 The Horror of Implicit Globals 的猎物.

代码有两个问题。

第一个是您缺少 i 的声明。您需要在循环上方添加 var i;，例如:

var i;
for ( i = 0; i < lists.length; i++) {
// ...

或

for (var i = 0; i < lists.length; i++) {

但请注意，即使在后一个示例中，i 变量也是函数范围的，不限于 for 循环。

第二个更微妙，有轮廓in this question and its answers :您的 click 处理程序将拥有对 i 变量的持久引用，而不是其创建位置的副本。因此，当它们响应点击而运行时，它们会将 i 视为值 lists.length(循环完成时它具有的值)。

在你的情况下，修复起来真的很容易(而且你不必再声明 i):完全删除循环，并将其替换为 Array#forEach 或 jQuery.each:

lists.forEach(function(list) {

    $(".sa-report-btn-" + list).click(function () {
        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");
    });

    $(".sa-hide-btn-" + list).click(function () {
        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");
    });
});

如果你需要支持非常老的浏览器，你可以填充 Array#forEach(它是在 2009 年添加的，作为 ECMAScript5 的一部分)，或者你可以使用 $.each (jQuery.each) 而不是:

$.each(lists, function(index, list) {
// Note addition ------^
    $(".sa-report-btn-" + list).click(function () {
        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");
    });

    $(".sa-hide-btn-" + list).click(function () {
        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");
    });
});

请注意，我们实际上并没有在回调中的任何地方使用 index，但我们必须指定它，因为 $.each 调用我们的回调时将索引作为第一个参数，值作为第二个。 (这就是为什么我更喜欢 Array#forEach。)所以我们必须接受两个参数，我们想要的一个是第二个。