本文介绍一种简洁、可维护的方式，通过 css 类选择器和事件委托实现按钮链式显示逻辑，避免重复代码与命名冲突问题，并使用现代 javascript 最佳实践替代内联事件处理。
本文介绍一种简洁、可维护的方式，通过 css 类选择器和事件委托实现按钮链式显示逻辑，避免重复代码与命名冲突问题，并使用现代 javascript 最佳实践替代内联事件处理。
在原始代码中，开发者试图为每个按钮编写独立的 onclick 处理函数（如 a()、b()…u()），并用 document.getElementById() 获取元素。但该方案存在两个根本性问题：
-
函数名与变量名冲突：JavaScript 中，
const b = document.getElementById("b")声明了一个常量b，而后续又定义了同名函数function b(){...}，这会导致语法错误或运行时覆盖，浏览器会拒绝执行后续脚本； -
内联事件绑定不可靠且难以维护：
onClick="a()"依赖全局作用域中的函数，且随按钮数量增长，代码呈线性膨胀，极易出错。
✅ 正确解法是遵循 DRY（Don’t Repeat Yourself）原则，采用统一类名 + 单一事件处理器的模式：
✅ 推荐实现（现代、健壮、可扩展）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>按钮链式显示教程</title>
</head>
<body>
<button class="btn-chain" type="button">第 1 步：点击我</button>
<button class="btn-chain" type="button" hidden>第 2 步：点击我</button>
<button class="btn-chain" type="button" hidden>第 3 步：点击我</button>
<button class="btn-chain" type="button" hidden>第 4 步：点击我</button>
<button class="btn-chain" type="button" hidden>第 5 步：点击我</button>
<!-- 可无限追加，无需修改 JS -->
<script>
const buttons = document.querySelectorAll('.btn-chain');
const handleNext = (event) => {
const currentBtn = event.currentTarget;
const currentIndex = Array.from(buttons).indexOf(currentBtn);
// 隐藏当前按钮
currentBtn.hidden = true;
// 计算下一个索引（支持循环：最后一步后回到第一步）
const nextIndex = (currentIndex + 1) % buttons.length;
// 显示下一个按钮
buttons[nextIndex].hidden = false;
};
// 为所有按钮统一绑定事件监听器
buttons.forEach(btn => btn.addEventListener('click', handleNext));
</script>
</body>
</html>? 关键要点说明
-
querySelectorAll('.btn-chain')：一次性获取全部目标按钮，返回静态 NodeList，避免逐个 ID 查找； -
Array.from(buttons).indexOf(currentBtn)：将 NodeList 转为数组以支持indexOf()，精准定位被点击按钮的序号； -
(currentIndex + 1) % buttons.length：模运算实现“点击到最后自动回到开头”的友好体验（如需单向终止，可改为Math.min(currentIndex + 1, buttons.length - 1)）； -
addEventListener替代onclick：解耦 HTML 与逻辑，提升可测试性与可维护性，符合现代 Web 开发规范。
⚠️ 注意事项
- 确保
<script></script>放在底部或使用DOMContentLoaded包裹，防止 DOM 元素未加载完成就执行查询； - 若需禁用“回退”或限制最大步数，可在
handleNext中添加条件判断（例如：if (currentIndex === buttons.length - 1) return;）； -
hidden属性语义清晰、兼容性好（IE10+），如需更精细控制显示/隐藏，可用style.display = 'none'或 CSS 类切换。
此方案仅需 10 行核心逻辑即可管理任意数量按钮，彻底告别冗余函数与命名冲突，是构建引导式 UI、多步表单或教学流程的理想基础模式。
