使用单个按钮或两个按钮控制两张图片（如“开”和“关”状态图）的交替显示，核心在于动态切换`display`样式，并合理管理状态变量。本文提供完整可运行的解决方案，支持双按钮独立控制与单按钮切换两种模式。
在原始代码中，存在几个关键问题：
- 两张图片均设置了 display: none，且第二张图未设置 id，无法通过 JavaScript 精准控制；
- “on”按钮仅显示 #my-image，但未隐藏“off”图；“off”按钮只隐藏了 #my-image，却未显示对应关闭状态图；
- 缺乏统一的状态管理，导致逻辑耦合、难以维护。
✅ 推荐采用单状态变量 + 单按钮切换方案（更简洁、符合用户直觉），也可扩展为双按钮独立控制。以下是优化后的完整实现：
✅ 方案一：单按钮切换（推荐）
<button id="toggle-button" style="--clr:#0FF0FC">
<span>Toggle</span><i></i>
</button>
<br><br>
<!-- 开启状态图 -->
<img id="img-on" src="pump on.gif" alt="Pump ON"
style="width:130px; height:130px; display: block; margin: 10px auto;">
<!-- 关闭状态图 -->
<img id="img-off" src="pump off.png" alt="Pump OFF"
style="width:120px; height:100px; display: none; margin: 10px auto;">
<script>
const btn = document.getElementById("toggle-button");
const imgOn = document.getElementById("img-on");
const imgOff = document.getElementById("img-off");
let isOn = true; // 初始状态：显示“ON”图
btn.addEventListener("click", () => {
if (isOn) {
imgOn.style.display = "none";
imgOff.style.display = "block";
isOn = false;
} else {
imgOn.style.display = "block";
imgOff.style.display = "none";
isOn = true;
}
});
</script>✅ 方案二：双按钮独立控制（兼容原结构）
若需保留“on”和“off”两个按钮（如 UI 设计要求），则应分别绑定明确行为，并确保互斥显示：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
<button id="btn-on" style="--clr:#0FF0FC"><span>ON</span><i></i></button>
<button id="btn-off" style="--clr:#0FF0FC"><span>OFF</span><i></i></button>
<br><br>
<img id="img-on" src="pump on.gif" alt="Pump ON"
style="width:130px; height:130px; display: block; margin: 10px auto;">
<img id="img-off" src="pump off.png" alt="Pump OFF"
style="width:120px; height:100px; display: none; margin: 10px auto;">
<script>
const imgOn = document.getElementById("img-on");
const imgOff = document.getElementById("img-off");
document.getElementById("btn-on").addEventListener("click", () => {
imgOn.style.display = "block";
imgOff.style.display = "none";
});
document.getElementById("btn-off").addEventListener("click", () => {
imgOn.style.display = "none";
imgOff.style.display = "block";
});
</script>⚠️ 注意事项：
- 避免混用 visibility 和 display：visibility: hidden 仍占文档流空间，而 display: none 完全移除布局影响——本场景推荐统一使用 display；
- 务必为每张图片设置唯一 id，否则 getElementById() 将失效；
- 若图片路径错误，浏览器控制台会报 404，建议先确认 pump on.gif 和 pump off.png 文件存在于正确路径；
- 可进一步封装为可复用函数（如 showImage('on')），便于多组开关复用。
通过以上任一方案，即可实现点击按钮时精准切换两张图片的显示状态，逻辑清晰、易于调试与扩展。
立即学习“Java免费学习笔记（深入）”；
