如何在纯JavaScript中实现一个“切换类”（toggle class）函数？

Question

该函数应搜索具有值为“graphicDesign”的“data-info”属性的任何元素，然后在这些元素上切换“hideMe”类。它在控制台中返回正确数量的元素，但在 classList 切换时出现错误。我尝试过其他替代方法，例如通过类名查找元素然后切换，但这也不起作用。

function toggleGraphicDesign() {
    let graphicDesignElements = document.querySelectorAll('[data-info="graphicDesign"]');
    console.log(graphicDesignElements.length);

    graphicDesignElements.classList.toggle('hideMe');

}

- LinkTCOne

Answer 1

querySelectorAll() 返回的是一个 NodeList 而不是单个元素。根据 MDN 的说明：

文档方法 querySelectorAll() 返回一个静态（非实时）NodeList，表示文档中与指定选择器组匹配的元素列表。

你需要使用 forEach() 循环遍历所有元素并切换每个元素的类。

function toggleGraphicDesign() {
    let graphicDesignElements = document.querySelectorAll('[data-info="graphicDesign"]');
    console.log(graphicDesignElements.length);
    graphicDesignElements.forEach(x => x.classList.toggle('hideMe')) 
}

- Maheer Ali