使用单个按钮或两个按钮控制两张图片（如“开”和“关”状态图）的交替显示，核心在于动态切换`display`样式，并合理管理状态变量。本文提供完整可运行的解决方案，支持双按钮独立控制与单按钮切换两种模式。
在原始代码中，存在几个关键问题：
- 两张图片均设置了 display: none，且第二张图未设置 id，无法通过 JavaScript 精准控制；
- “on”按钮仅显示 #my-image，但未隐藏“off”图；“off”按钮只隐藏了 #my-image，却未显示对应关闭状态图；
- 缺乏统一的状态管理，导致逻辑耦合、难以维护。
✅ 推荐采用单状态变量 + 单按钮切换方案（更简洁、符合用户直觉），也可扩展为双按钮独立控制。以下是优化后的完整实现：
✅ 方案一：单按钮切换（推荐）
@@##@@ @@##@@
✅ 方案二：双按钮独立控制（兼容原结构）
若需保留“on”和“off”两个按钮（如 UI 设计要求），则应分别绑定明确行为，并确保互斥显示：
@@##@@ @@##@@
⚠️ 注意事项：
- 避免混用 visibility 和 display：visibility: hidden 仍占文档流空间，而 display: none 完全移除布局影响——本场景推荐统一使用 display；
- 务必为每张图片设置唯一 id，否则 getElementById() 将失效；
- 若图片路径错误，浏览器控制台会报 404，建议先确认 pump on.gif 和 pump off.png 文件存在于正确路径；
- 可进一步封装为可复用函数（如 showImage('on')），便于多组开关复用。
通过以上任一方案，即可实现点击按钮时精准切换两张图片的显示状态，逻辑清晰、易于调试与扩展。
立即学习“Java免费学习笔记（深入）”；
