我有一个简单的 jquery 脚本，效果很好：
$(function(){
$("button").click(function(){
$(this).parent().fadeOut(500, function() {
$(this).next().fadeIn(500);
});
});
});section {
width: 300px;
height: 250px;
background-color: #2ac99e;
margin: auto;
display: flex;
flex-direction: column;
}
button {
display: block;
margin-top: auto;
margin-right: auto;
margin-left: auto;
font-size: 2em;
padding: 10px;
margin-bottom: 10px;
}
#p2,#p3,#p4 {display:none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section id="p1">
<div>Content for class "1" Goes Here</div>
<button>Next</button>
</section>
<section id="p2">
<div>Content for class "2" Goes Here</div>
<button>Next</button>
</section>
<section id="p3">
<div>Content for class "3" Goes Here</div>
<button>Next</button>
</section>
<section id="p4">
<div>Content for class "4" Goes Here</div>
</section>基于此，我尝试创建一个简单的仅 JavaScript 版本，但很难让它工作。也许你可以告诉我为什么我无法通过第二个盒子？代码如下：
document.querySelector("button").onclick = function() {func()};
function func () {
let btn = document.querySelector("button").parentElement;
let next = document.querySelector("button").parentElement.nextElementSibling;
console.log(btn);
btn.classList.add('hide');
next.classList.remove('hide');
}section {
width: 300px;
height: 250px;
background-color: #2ac99e;
margin: auto;
display: flex;
flex-direction: column;
}
button {
display: block;
margin-top: auto;
margin-right: auto;
margin-left: auto;
font-size: 2em;
padding: 10px;
margin-bottom: 10px;
}
.hide {display:none;}<section id="p1">
<div>Content for class "1" Goes Here</div>
<button>Next</button>
</section>
<section id="p2" class="hide">
<div>Content for class "2" Goes Here</div>
<button>Next</button>
</section>
<section id="p3" class="hide">
<div>Content for class "3" Goes Here</div>
<button>Next</button>
</section>
<section id="p4" class="hide">
<div>Content for class "4" Goes Here</div>
</section>基本上我只需要隐藏现有元素并显示下一个元素。我知道我可以使用多个按钮创建多个功能，但我想要一个可重用的代码，以后我可以在其中添加任意数量的框，而不必每次都弄乱代码。
尝试以下方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
display: none;
}
</style>
<title>Toggle Boxes</title>
</head>
<body>
<div class="box" style="display: block;">Box 1 <button
onclick="toggleBoxes(this)">Next</button></div>
<div class="box">Box 2 <button onclick="toggleBoxes(this)">Next</button>.</div>
<div class="box">Box 3 <button onclick="toggleBoxes(this)">Next</button></div>
<script>
function toggleBoxes(button) {
var currentBox = button.parentNode;
var nextBox = currentBox.nextElementSibling;
currentBox.style.display = 'none';
nextBox.style.display = 'block';
}
</script>
</body>
</html>
此代码定义了一个函数toggleBoxes，它将按钮作为参数，查找其父div（当前框）和下一个同级div（下一个框）。然后它设置显示属性来控制可见性。
请注意，我添加了默认样式以最初隐藏所有框。