如何在vanilla JavaScript中实现“toggle类”功能？

Question

此函数应在文档中搜索具有值为'graphicDesign'的'data-info'属性的任何元素，然后在这些元素上切换类'hideMe'。

它在控制台中返回正确数量的元素，但在classList切换上中断。

我已经尝试过替代方法，例如按类名查找元素然后切换，但这也不起作用。

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

    graphicDesignElements.classList.toggle('hideMe');

}

Answer 1

querySelectorAll()返回NodeList而不是单个元素。根据MDN

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

您需要使用forEach()和每个元素的toggle类遍历所有元素。

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