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

Question

Javascript新手，我正在开发一个类似问答的解决方案，该解决方案使用div和按钮来循环提问。我已经用Javascipt编写了一些代码，但由于某种原因，它没有完成最后一个问题，它应该停止在哪里。我们将感谢您对为什么下一个问题不转到最后一个问题的帮助。

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只是一个唯一的元素，所以您应该使用类，将其更改为<button class="next">Next</button>

---

在JS中，您应该选择所有这些下一个按钮元素，并使用forEach为所有这些元素添加一个监听器。

然后，在该监听器中，您可以使用parentElement和nextElementSibling来获取要显示/隐藏的连接问题div，并在更改可见性之前检查下一个元素是否为问题。

此外，添加/删除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>

Answer 2

不可能有一个以上的元素具有相同的id(按钮next+prev(，因此更改为class='next'或使用唯一的id。您需要按钮的forEach作为eventListener。您可以使用forEach对其进行迭代。

var question = document.querySelectorAll('.question');
var next = document.querySelectorAll(".next");
next.forEach(n => {n.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="prev1">Prev</button>
<button class="next" id="next1">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="prev2">Prev</button>
<button class="next" id="next2">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="prev3">Prev</button>
<button class="next" id="next3">Next</button>
</div>
</div>