未捕获的ReferenceError:我没有定义

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

首先,听起来你正在使用严格的模式 - 好!它拯救了你免受暗杀全球恐怖的掠夺.

代码有两个问题.

第一个是你错过了声明i.您需要var i;在循环上方添加,例如:

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

要么

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

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

第二个是更隐蔽,并概述了在这个问题和它的答案:你的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");
    });
});

如果您需要支持真正的旧浏览器,您可以使用shim 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.)所以我们必须接受两个论点,我们想要的是第二个.