如何在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')) 
}