如何编写JS函数为所有test类元素切换heading-nav-active CSS样式

问题原因 #

• document.querySelectorAll('.test') 返回的是包含所有匹配元素的NodeList集合，不是单个DOM元素，集合本身没有classList属性，直接调用nav.classList.toggle会报错无法生效。

修正后代码 #

const navSlide2 = () => {
    const burger = document.querySelector('.burger');
    const testElements = document.querySelectorAll('.test');

    burger.addEventListener('click',()=>{
        // 遍历所有.test元素，逐个切换样式类
        testElements.forEach(item => {
            item.classList.toggle('heading-nav-active');
        });
    });
}
// 函数定义后需要调用才能生效
navSlide2();

可选调整说明 #

• 如果你需要点击后强制给所有元素添加样式类而非切换存在状态，可以把toggle方法替换为add
• 如果你页面中的.test元素是动态生成的，需要确保执行querySelectorAll时元素已经渲染挂载到DOM树中，否则无法匹配到目标元素

内容的提问来源于stack exchange，提问作者Wyrden