Question

此功能应在文档中搜索具有“ data-info”属性且值为“ graphicDesign”的任何元素，然后在这些元素上切换类“ 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()遍历所有元素，并切换每个元素的类。

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

如何在原始JavaScript中实现“切换类”功能？

1 个答案: