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')
    }
});

如果ID是正确的ID，请删除课程

2 个答案: