如何在将 class 添加到 Javascript 中的新 object 时删除其所有实例

Question

试图在最近点击的导航栏按钮上创建一个活动的 state。 目前它会将 class 添加到每个选定的项目，但 for...of 循环似乎不会删除 class。

导航栏是使用以下代码动态制作的：

function buildNavBar(){
  for (section of sections){
    numberOfSection = section.getAttribute('data-nav');
    idOfSection = section.getAttribute('id');
    navBarList = document.createElement('li');
    //Uses template literal strings to present the section names in the nav bar
    navBarList.innerHTML = `<a class='menu__link' href='#${idOfSection}'>${numberOfSection}</a>`;

    navBar.appendChild(navBarList);
  }
}

document.getElementById('navbar__list').addEventListener("click", function(event){
  function removeStyle(){
    let funcElem_Style = 'funcElemStyle';
    let menuLinks = document.querySelectorAll('menu__link')
    menuLinks = document.getElementsByClassName('funcElemStyle')
    for(menuLink of menuLinks){
      menuLink.classlist.remove('funcElemStyle')
    }
  }
  event.target.classList.add("funcElemStyle");
});

Answer 1

不要使用for...of来迭代实时 HTMLCollections，就像getElementsByClassName返回的那样。 原因是在该循环中，您正在执行导致元素立即从实时集合中删除的代码，这反过来对于for...of （内部基于索引工作）意味着要迭代的下一个元素实际上是下一个元素之后的元素，导致一个循环只影响集合中的每个第二个元素。

相反，将结果散布到一个数组中并对其进行迭代。

接下来，这两行没有意义：

let menuLinks = document.querySelectorAll('menu__link')
menuLinks = document.getElementsByClassName('funcElemStyle')

1. document.querySelectorAll('menu__link')会找到<menu_link>元素（这将是无效元素，您的页面可能没有这些元素）。 你可能意味着 select 所有元素与 CSS class 像这样： document.querySelectorAll('.menu__link') ？

2. 在下一行中，您直接将刚刚尝试从 DOM 覆盖为 select 的内容： menuLinks = document.getElementsByClassName('funcElemStyle') 。

3. 在您的匿名事件侦听器 function 中，您声明了另一个您从未调用过的 function removeStyle() 。

这些事情说，这可能是你所追求的：

document
  .getElementById('navbar__list')
  .addEventListener('click', function(event) {
    for (const menuLink of [...document.querySelectorAll('.menu__link')]) {
      menuLink.classlist.toggle('funcElemStyle', event.target === menuLink)
    }
  }
);