使用JavaScript点击多组label切换selected类功能异常问题求助

问题原因 #

原有代码选中了页面全部.top-nav容器下的所有label元素，点击任意label时都会清空所有label的selected类，导致不同容器的导航状态互相干扰。

解决方案 #

调整逻辑为点击时仅操作当前label所属.top-nav容器内的元素，不影响其他容器的状态，修改后的JS代码如下：

const menuLis = document.querySelectorAll(".top-nav > label");

for (let label of menuLis) {
  label.addEventListener("click", function(){
    // 获取当前点击label所属的top-nav容器
    const currentNav = this.closest('.top-nav');
    // 仅移除当前容器内所有label的selected类
    currentNav.querySelectorAll('label').forEach(item => {
      item.classList.remove('selected');
    });
    // 为当前点击的label添加选中类
    this.classList.add('selected');
  });
}

原有CSS、HTML代码无需做任何调整，直接替换JS部分即可生效。

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