javascript - 使用上一个/下一个按钮导航 div

Question

我有一个目前正在开发的小网站，我想做的是通过上一个/下一个按钮在我的 div 中导航。我设法让它从一个切换到另一个，但不知何故第三个 div 被忽略了，我不知道我错过了什么。

这是我的代码片段:

      var nextbtn = document.getElementById("next-btn");
      var previousbtn = document.getElementById("previous-btn");
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var div3 = document.getElementById("div3");
      
      var i = 0;
      nextbtn.addEventListener("click", function () {
        i++;
        if (i == 1) {
          div1.style.display = "block";
          div2.style.display = "none";
          div3.style.display = "none";
        } else if (i == 2) {
          div1.style.display = "none";
          div2.style.display = "block";
          div3.style.display = "none";
        } else if (i == 3) {
          div1.style.display = "none";
          div2.style.display = "none";
          div3.style.display = "block";
        } else {
          console.log("you have reached the limit");
        }
      });

    body {
      display: flex;
      flex-wrap: wrap;
    }
    .div1,
    .div2,
    .div3 {
      width: 200px;
      height: 200px;
    }
    .div1 {
      display: block;
    }
    .div2,
    .div3 {
      display: none;
    }

    <div class="div1" id="div1" style="background-color: crimson">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="buttons-controller">
      <button id="first-div">1</button>
      <button id="second-div">2</button>
      <button id="third-div">3</button>
    </div>

编辑:目前我只在“下一步”按钮上工作，所以上一个按钮还没有工作。

Answer 1

您正在按 id 选择下一个按钮，但页面上有多个下一个按钮 - 因此只有 div1 中的一个被选中。

文档中的 ID 应该是唯一的，您可以在此处阅读更多相关信息: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

使用类似 document.querySelector('.next-button') 的类按类选择按钮，您应该也能够处理 div2 中的点击。

还要确保将 i 初始化为 1，否则需要点击两次才能到达 div2。