本文介绍如何使用javascript为两个按钮（“on”和“off”）绑定交互逻辑，点击“on”时显示一张图片、隐藏另一张，点击“off”时反之，实现双图切换效果，并提供可复用的布尔状态控制方案。
要实现按钮点击切换两张图片（如 pump on.gif 和 pump off.png）的显示/隐藏，关键在于统一状态管理和精准控制 DOM 元素的 display 样式。原代码存在几个问题：两按钮逻辑分离、未关联第二张图片、混用 visibility: hidden 与 display: none（二者行为不同），且缺乏状态跟踪，导致无法可靠切换。
✅ 推荐做法是：
- 为两张图片分别设置唯一 ID（如 #img-on 和 #img-off）；
- 使用一个布尔变量（如 isOn = true）记录当前状态；
- 将两个按钮共用同一事件处理函数（或分别调用同一逻辑），根据状态决定显隐。
以下是优化后的完整可运行代码：
@@##@@ @@##@@
? 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 避免混用 display 和 visibility：display: none 完全移出文档流，visibility: hidden 仍占布局空间，本例推荐统一用 display；
- 图片需确保路径正确（开发时建议使用相对路径或检查浏览器控制台 404 报错）；
- 若希望动画过渡效果，可在 CSS 中添加 transition: opacity 0.3s ease 并配合 opacity + visibility 控制，但需同步调整 display 以保证可访问性；
- 更健壮的写法可封装为可复用函数，支持任意多组开关图，传入元素 ID 和状态映射即可。
该方案逻辑清晰、易于维护，适用于各类“启停”“开关”类 UI 场景。
