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