javascript - 如何显示下一个div并隐藏上一个？

Question

Javascript 新手，我正在研究类似测验的解决方案，该解决方案使用 div 和按钮来循环浏览问题。我已经在 J​​avascipt 中编写了一些代码，但由于某种原因它没有通过最后一个问题它应该停止的地方。关于为什么下一个没有转到最后一个问题的任何帮助将不胜感激。

var question = document.querySelectorAll('.question');
var next = document.getElementById("next");

next.addEventListener("click", function() {
  var question = document.querySelectorAll(".question");

  for (var i = 0; i < question.length; i++) {
    if (question[i].style.display != "none") {
      question[i].style.display = "none";
      //resets to original questions
      if (i == question.length - 1) {
        question[0].style.display = "block";
      } else {
        question[i + 1].style.display = "block";
      }
      break;
    }
  }
});

.question {
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  color: white;
  background: #333;
  position: relative;
  display: none;
}

.visible {
  display: block;
}

.q-input,
.move {
  margin: 10px;
  border: none;
  padding: 10px;
}

.move {
  display: flex;
  justify-content: space-between;
}

.move button {
  padding: 5px;
  font-size: 16px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.move button:hover {
  box-shadow: -2px -2px 20px #fff;
}

.move button:focus {
  outline: none;
}

<div class="question visible">
  <h1>Question <span class="one">1</span></h1>
  <p>What is your Name</p>
  <input type='text' class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 2</h1>
  <p>What is your Age</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 3</h1>
  <p>What is your Sex</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>

Answer 1

您正在使用 document.getElementById("next")它只返回 ID 为 next 的第一个按钮，因此只有该按钮会添加点击监听器。
ID 只是一个唯一的元素，因此您应该使用 class 来代替 - 将其更改为 <button class="next">Next</button>
在您的 JS 中，您应该选择所有这些 next 按钮元素，并使用 forEach为所有这些添加一个监听器。
然后在该监听器中，您可以使用 parentElement 来显示/隐藏连接的问题 div。和 nextElementSibling ，并在更改可见性之前检查下一个元素是一个问题。
同时添加/删除 visible与尝试手动编辑样式属性相比，类更整洁、更易于调试。

所有在一起看起来像:

var nextButtons = document.querySelectorAll('.next');

nextButtons.forEach(nextButton =>
  nextButton.addEventListener("click", function() {
    var currentQuestion = nextButton.parentElement.parentElement;
    var nextElement = currentQuestion.nextElementSibling;
    if (nextElement.classList.contains("question")) {
      nextElement.classList.add("visible");
      currentQuestion.classList.remove("visible");
    }
  }));

.question {
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  color: white;
  background: #333;
  position: relative;
  display: none;
}

.visible {
  display: block;
}

.q-input,
.move {
  margin: 10px;
  border: none;
  padding: 10px;
}

.move {
  display: flex;
  justify-content: space-between;
}

.move button {
  padding: 5px;
  font-size: 16px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.move button:hover {
  box-shadow: -2px -2px 20px #fff;
}

.move button:focus {
  outline: none;
}

<div class="question visible">
  <h1>Question <span class="one">1</span></h1>
  <p>What is your Name</p>
  <input type='text' class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 2</h1>
  <p>What is your Age</p>
  <input type="text" class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 3</h1>
  <p>What is your Sex</p>
  <input type="text" class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>