本文详解如何使用 jquery 实现按钮与标签（或其他元素）的条件性显隐切换：点击“hide”时隐藏图片、自身及对应标签，同时显示“show”按钮；反之亦然，确保 ui 状态同步且无冗余 dom 元素残留。
本文详解如何使用 jquery 实现按钮与标签（或其他元素）的条件性显隐切换：点击“hide”时隐藏图片、自身及对应标签，同时显示“show”按钮；反之亦然，确保 ui 状态同步且无冗余 dom 元素残留。
在 Web 表单或交互式界面中，常需根据用户操作动态控制元素的可见性——例如，点击“Hide”后不仅隐藏目标内容（如图片），还需让触发按钮自身消失，并显示对应的“Show”按钮，从而形成清晰、自洽的状态切换逻辑。jQuery 提供了简洁高效的 DOM 操作方法，show() 与 hide() 是最常用的选择（它们通过设置 display: none 实现隐藏，保留元素在 DOM 中的位置与数据，适合频繁切换场景）。
以下是一个完整、可直接运行的示例：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动态显隐控制示例</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> </head> <body> <img src="example.jpg" alt="示例图片" /> <button id="hide">Hide</button> <button id="show" style="display: none;">Show</button> </body> </html>
$(document).ready(function() {
// 点击 "Hide" 按钮：隐藏图片、自身，并显示 "Show" 按钮
$("#hide").click(function() {
$("img:first").hide();
$(this).hide(); // 隐藏当前按钮（#hide）
$("#show").show(); // 显示对称按钮（#show）
});
// 点击 "Show" 按钮：显示图片、自身（实际为切换逻辑），并隐藏 "Hide" 按钮
$("#show").click(function() {
$("img:first").show();
$(this).hide(); // 隐藏当前按钮（#show）
$("#hide").show(); // 显示原始按钮（#hide）
});
});✅ 关键要点说明：
- $(this) 在事件处理函数中精准指向被点击的按钮，避免硬编码选择器，提升可维护性；
- 初始状态建议通过 HTML 的 style="display: none;" 隐藏 #show，而非仅靠 JS 控制，确保无 JS 降级时仍具基本可用性；
- 若需彻底从 DOM 移除元素（而非仅隐藏），应使用 remove()，但本场景推荐 hide()/show()，因其可逆、轻量且支持链式调用；
- 如需扩展至多个图片或带 label 的表单字段（如 ），只需将 $("img:first") 替换为更精确的选择器（如 $("#img1")），并同步操作对应 label（例如 $("label[for='img1']").hide()）。
该方案逻辑清晰、零依赖外部库（仅需 jQuery）、易于复用，适用于各类表单折叠/展开、步骤引导、条件控件等交互设计场景。
