如何为现有多组按钮添加Next/Prev前后切换显示功能

首先修正原代码中的几个基础问题，这是实现功能的必要前提：

• 原代码中两组按钮没有独立父容器，无法批量控制显隐
• 两个切换按钮重复使用了next-button的id，违反HTML规范，JS无法正常识别
• 第二组按钮的name属性重复设置，后续维护会出现表单数据异常问题

第一步：调整HTML结构 #

把两组按钮分别用专属class的容器包裹，给Next/Prev按钮设置唯一id，修改后的结构如下：

<div id="chart-section-wrapper" class="container">
    <div id="chart-section">
        <div class="overall-btns col my-3">
            <!-- 第一组按钮容器 -->
            <div class="button-group" id="button-group-1">
                <button class="selector-button" name="button-default-1">
                    <i class="icon bi bi-droplet-half"></i><span>Albanian</span>
                </button>          
                <button class="selector-button" name="button-default-2">
                    <i class="icon bi bi-droplet-half"></i><span>Arabic</span>
                </button>          
                <button class="selector-button" name="button-default-3">
                    <i class="icon bi bi-droplet-half"></i><span>Armenian</span>
                </button>
            </div>

            <!-- 第二组按钮容器，初始状态隐藏 -->
            <div class="button-group" id="button-group-2" hidden>
                <button class="selector-button" name="button-default-4">
                    <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
                </button>
                <button class="selector-button" name="button-default-5">
                    <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
                </button>
                <button class="selector-button" name="button-default-6">
                    <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
                </button>
            </div>

            <!-- 切换按钮区 -->
            <div class="d-flex gap-2 mb-3">
                <div class="next-button-parent text-right">
                    <button class="next-button" id="prev-button">Prev</button>
                </div>
                <div class="next-button-parent text-right">
                    <button class="next-button" id="next-button">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

第二步：添加交互逻辑JavaScript #

用全局变量记录当前展示的按钮组序号，绑定切换按钮的点击事件，实现组间显隐切换：

// 记录当前显示的按钮组序号，从1开始计数
let currentGroupIndex = 1;
// 获取所有按钮组元素
const buttonGroups = document.querySelectorAll('.button-group');

// Next按钮点击事件
document.getElementById('next-button').addEventListener('click', () => {
    // 到达最后一组时不再继续向后切换
    if (currentGroupIndex >= buttonGroups.length) return;
    // 隐藏当前展示的组
    buttonGroups[currentGroupIndex - 1].hidden = true;
    // 更新序号，显示下一组
    currentGroupIndex += 1;
    buttonGroups[currentGroupIndex - 1].hidden = false;
});

// Prev按钮点击事件
document.getElementById('prev-button').addEventListener('click', () => {
    // 到达第一组时不再继续向前切换
    if (currentGroupIndex <= 1) return;
    // 隐藏当前展示的组
    buttonGroups[currentGroupIndex - 1].hidden = true;
    // 更新序号，显示上一组
    currentGroupIndex -= 1;
    buttonGroups[currentGroupIndex - 1].hidden = false;
});

可选优化方向 #

• 到达第一组/最后一组时，自动禁用对应的Prev/Next按钮，避免无效点击
• 给组切换添加淡入淡出的过渡动画，优化交互体验
• 后续如果需要增加第三、第四组按钮，只需要新增对应class为button-group的容器即可，不需要修改现有JS逻辑

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