纯JS实现隐藏当前元素显示下一个，为何无法切换到第三个？

我有一段运行良好的jQuery脚本：

HTML

<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>

CSS

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;}

JavaScript

$(function(){
    $("button").click(function(){ 
        $(this).parent().fadeOut(500, function() {
            $(this).next().fadeIn(500);
        });
    });
});

基于该脚本，我尝试编写纯JavaScript版本，但无法正常切换到第三个元素，我的代码如下：

HTML

<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>

CSS

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;}

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');
}

我需要实现隐藏当前元素并显示下一个元素的功能，不想为每个按钮写单独函数，希望代码具备可复用性，后续添加任意数量元素时无需修改代码。

问题根源 #

• 事件绑定不完整：你只给页面第一个按钮绑定了点击事件，后面的按钮没有绑定，点击第二个按钮时完全无响应。
• 元素获取逻辑错误：document.querySelector("button")永远返回页面第一个匹配的按钮，不管点击哪个按钮，都会操作第一个按钮的父元素，自然无法切换到第三个元素。

修复后的代码 #

HTML（无需修改）

<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>

CSS（无需修改）

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;}

JavaScript

// 给所有按钮批量绑定点击事件
document.querySelectorAll("button").forEach(btn => {
    btn.addEventListener('click', function() {
        const currentSection = this.parentElement;
        const nextSection = currentSection.nextElementSibling;
        
        // 确保存在下一个元素再执行操作，避免最后一个按钮点击出错
        if (nextSection) {
            currentSection.classList.add('hide');
            nextSection.classList.remove('hide');
        }
    });
});

代码说明 #

• 批量绑定事件：用document.querySelectorAll("button")获取所有按钮，循环给每个按钮绑定点击事件，后续新增按钮只需确保页面加载后重新执行这段绑定逻辑即可。
• 用this指向当前点击按钮：点击哪个按钮，this就指向哪个按钮，能准确获取当前按钮的父元素（当前section），再找到它的下一个兄弟元素（下一个section）。
• 边界判断：添加if (nextSection)避免最后一个按钮点击时出错（最后一个section没有下一个兄弟元素）。

如果想要实现jQuery版本的淡入淡出动画效果，可以用CSS过渡实现，修改CSS如下：

section {
    width: 300px;
    height: 250px;
    background-color: #2ac99e;
    margin: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.5s ease, height 0.5s ease, margin 0.5s ease;
}
button {
    display: block;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    font-size: 2em;
    padding: 10px;
    margin-bottom: 10px;
}
.hide {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0 auto;
    overflow: hidden;
}

JavaScript无需修改，即可实现类似fadeOut/fadeIn的过渡效果。

内容的提问来源于stack exchange，提问作者reizer