javascript - 变量在 for 循环中变为未定义

Question

我正在与我正在处理的 javascript 函数作斗争。

在 for 循环内，我在该循环内迭代所有具有类“visible”的元素我正在执行两个 Action 。

1. 元素[i].removeAttribute("类");
2. 元素[i].setAttribute("类", "隐藏");

出于某种原因，只有 1 个有效。 2 产生一个错误说:

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

即使我使用 console.log 记录 elements[i]；在第一次 console.log 调用之后该元素存在，但在第二个 console.log elements[i] 上是 'undefined'

我到底错过了什么，这让我发疯，如果我的笔记本电脑不是那么贵的话它现在已经坏了。帮助:(

函数如下:

function hide_visable_elements()
{
    // remove body EventListener
    var body = document.getElementsByTagName("body");
    body[0].removeEventListener("click", hide_visable_elements, true);

    var elements = document.getElementsByClassName("visible");

    for (var i = 0; i < elements.length; i++)
    {
        console.log(elements[i]); // Works like a swiss clock

        elements[i].removeAttribute("class"); 

        console.log(elements[i]); // why elements[i] is 'undefined' now ???

        elements[i].setAttribute("class", "hidden"); // << turns to useless code
    }
}

Answer 1

这是因为 getElementsByClassName 返回一个 NodeList，它是事件的。也就是说，当它引用的元素发生变化时，它会自行更新。

当您从 NodeList 中的元素中删除 class 属性时，它会从该列表中删除(因为它不再具有 visible 类名)。

您实际上不需要删除该属性。只需设置它就可以完成工作。但是由于 NodeList 在您操作它包含的元素时会发生变化，因此您需要通过它向后计数(因为每次更改其中的一个元素时，它都会被删除，因此长度会减一):

for (var i = elements.length - 1; i >= 0; i--) {
    elements[i].setAttribute("class", "hidden");
}