时间戳

首页 > 解决方案 > 无法使用 forEach 循环遍历 HTMLCollection

javascript - 无法使用 forEach 循环遍历 HTMLCollection

问题描述

我正在尝试为每个类名为director__card--iconBox. 我选择这些元素的方式是通过getElementsByClassName. 编写当前代码后，我正在测试将background-color其父 div 的一个应用到红色的函数。最终目标是能够翻转 div 并显示稍后将出现的 div 的背面。

const toggleButton = document.getElementsByClassName("director__card--iconBox");

toggleButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.parentElement.querySelector(".director__card");
    card.classList.toggle("open");
  })
);

我正在取回一个 HTMLCollection。我的想法是这不会因为 HTMLCollection 而工作？我试过 querySelectorAll 带回一个节点列表，但 NodeList 返回空..

标签： javascripthtmldom

解决方案

HTMLCollection是一个类似数组的对象，但它没有forEach方法。

您可以通过多种方式对其进行迭代；

例如

从中创建一个数组；

Array.from(toggleButton).forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.parentElement.querySelector(".director__card");
    card.classList.toggle("open");
  })
);

利用for..of

for (let item of toggleButton) {
    item.forEach((el) =>
        el.addEventListener("click", (event) => {
            const card = event.target.parentElement.querySelector(".director__card");
            card.classList.toggle("open");
        });
    );
}

或者，只是for循环。

for (let i = 0, len = toggleButton.length; i < len; i++) {
    toggleButton[i].forEach((el) =>
        el.addEventListener("click", (event) => {
            const card = event.target.parentElement.querySelector(".director__card");
            card.classList.toggle("open");
        });
    );
}

推荐阅读