本文介绍如何使用javascript为两个按钮（“on”和“off”）绑定交互逻辑，点击“on”时显示一张图片、隐藏另一张，点击“off”时反之，实现双图切换效果，并提供可复用的布尔状态控制方案。
要实现按钮点击切换两张图片（如 pump on.gif 和 pump off.png）的显示/隐藏，关键在于统一状态管理和精准控制 DOM 元素的 display 样式。原代码存在几个问题：两按钮逻辑分离、未关联第二张图片、混用 visibility: hidden 与 display: none（二者行为不同），且缺乏状态跟踪，导致无法可靠切换。
✅ 推荐做法是：
- 为两张图片分别设置唯一 ID（如 #img-on 和 #img-off）；
- 使用一个布尔变量（如 isOn = true）记录当前状态；
- 将两个按钮共用同一事件处理函数（或分别调用同一逻辑），根据状态决定显隐。
以下是优化后的完整可运行代码：
@@##@@ @@##@@
? 注意事项：
