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

Question

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

这是我的 sn-p 代码：

      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。

Answer 2

您不能拥有多个具有相同 id 的元素，这就是它不起作用的原因。

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 = "none";
    div2.style.display = "block";
    div3.style.display = "none";
  } else if (i == 2) {
    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">
</div>

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

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

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