如果ID是正确的ID，则删除class

Question

如果某个按钮被点击，希望移除一个类。

<div class="slide-container">
    <section class="about" id="slide-0">
      <div class="menu-total">
        <nav class="nav">
          <button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
          <button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
          <button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
          <button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
          <button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
        </nav>

      <div class="hamburger">
        <span class="hamburger__patty"></span>
        <span class="hamburger__patty"></span>
        <span class="hamburger__patty"></span>
      </div>
</div>

我想删除类的那个按钮是HOME按钮。所以"slideTo('slide-2)“。如果它点击了其他的，那么这个类就会被保留。我相信可能是有人在我的循环中出错了，或者是没有正确获取项的ID /。

function slideTo(slideId) {
    const slide = document.getElementById(slideId);
    slide.scrollIntoView({
      behavior: 'smooth'
    })


// above this line works fine

    let nonHome = document.querySelectorAll('.slide-container section');
    let nonHomeID = document.getElementById('slide-2');


    var i;
    setTimeout(function(){
      for (i=0; i < nonHome.length; i++ ){

// i believe it's somewhere here it is wrong

        if (nonHome[i].id != nonHomeID){
          nonHome[i].classList.add("nav-visibility");
        } else{
          nonHomeID.classList.remove("nav-visibility");
        }

      }
    }, 1000)


  }

Answer 1

如果你可以使用jquery库，你可以在HTML中写：

 <button class="nav_link" data-value="home">HOME</button>
 ...

然后在JS代码中：

$(".nav_link").on("click", function() {
    var valueClicked = $(this).data("value"); // Get the data-value clicked

    $(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
       var v = $(this).data("value");
       if (v == valueClicked) {
           $(this).removeClass("nav-visibility"); 
       } else {
           $(this).addClass("nav-visibility"); 
       }
    )
}

不是很简单，但是HTML更干净。

Answer 2

更简单的版本，如果不需要在每次单击按钮时浏览所有按钮：

$(".nav_link").on("click", function() {
    var valueClicked = $(this).data("value"); // The value of the button clicked by the user

    if (valueClicked == "home") {
        $(this).removeClass("nav-visibility");
        console.log('remove')
    } else { $(this).addClass("nav-visibility");
        console.log('add')
    }
});