使用前/后按钮浏览div元素

Question

我正在开发一个小型网站，想通过“上一页”和“下一页”按钮来浏览我的div块。我已经成功实现了从一个div切换到另一个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>

编辑：目前我只在“下一个”按钮上工作，所以之前的按钮还没有启用。

- user17348802

---

你正在通过id选择下一个按钮，但页面上有多个下一个按钮 - 因此只有div1中的按钮被选中。使用类选择器选择按钮，例如document.querySelector('.next-button')，然后你就可以了。 - aside

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。

- aside

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>

- Perfectó