未捕获的ReferenceError:未定义 [英] Uncaught ReferenceError: i is not defined

问题描述

我正试图在我的数组上建立一个for循环

I'm trying to make a for-loop base on my array

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

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])?只是好奇...

Am I doing it correctly ? I got Uncaught ReferenceError: i is not defined Can I concat each loop with my jQuery selector like this --> $(".sa-hide-"+lists[i]) ? just curious ...

推荐答案

首先，听起来您使用的是严格模式. 好！它使您免于沦落为 内隐全球性恐怖 .

First off, it sounds like you're using strict mode — good! It's saved you from falling prey to The Horror of Implicit Globals.

代码有两个问题.

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

The first one is that you're missing the declaration for i. You need to add var i; above the loop, e.g:

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

或

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

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

Note, though, that even in that latter example, the i variable is function-wide, not limited to the for loop.

第二个更微妙，在中概述这个问题及其答案:您的click处理程序将对i变量具有持久引用，而不是在创建变量时对其的复制.因此，当他们响应点击而运行时，他们会看到i作为值lists.length(循环完成后的值).

The second one is more subtle, and is outlined in this question and its answers: Your click handlers will have an enduring reference to the i variable, not a copy of it as of where they were created. So when they run in response to a click, they'll see i as the value lists.length (the value it has when the loop has finished).

在您的情况下，它真的很容易修复(并且您不必再声明i):完全删除循环，并用Array#forEach或jQuery.each代替:

In your case, it's really easy to fix (and you don't have to declare i anymore): Remove the loop entirely, and replace it with Array#forEach or 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(作为ECMAScript5的一部分于2009年添加)，也可以改为使用$.each(jQuery.each):

If you need to support really old browsers, you can either shim Array#forEach (which was added in 2009, as part of ECMAScript5), or you can use $.each (jQuery.each) instead:

$.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的原因.)因此，我们必须接受两个参数，我们希望其中一个成为第二个.

Note that we don't actually use index anywhere in our callback, but we have to specify it because $.each calls our callback with the index as the first argument, and the value as the second. (Which is why I prefer Array#forEach.) So we have to accept two arguments, with the one we want being the second one.

这篇关于未捕获的ReferenceError:未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！