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