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

Question

我正在尝试为每个类名为 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 返回空..

Answer 1

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");
        });
    );
}