本文介绍使用 jQuery 在 元素中安全切换密码明文与掩码（如圆点）的实用方法，通过 .html() 回调函数结合 .data() 缓存原始内容，避免硬编码、状态丢失和 DOM 同步问题。
本文介绍使用 jquery 在 `` 元素中安全切换密码明文与掩码（如圆点）的实用方法，通过 `.html()` 回调函数结合 `.data()` 缓存原始内容，避免硬编码、状态丢失和 dom 同步问题。
在前端开发中，常需实现“点击眼睛图标切换密码可见性”的交互效果。虽然标准做法是使用 <input type="password"> 并动态切换 type 属性（password ↔ text），但若受限于 UI 设计必须使用 <span></span> 显示掩码文本（如 ••••••••），则需手动管理“原始值”与“掩码值”之间的双向切换。
核心思路是：不依赖全局变量或重复赋值，而是利用 jQuery 的 .data() 方法持久化存储原始 HTML 内容，并通过 .html() 的回调函数获取当前值进行条件判断。这样既保证状态隔离（每个元素独立），又避免多次点击导致逻辑错乱。
以下为推荐实现代码：
$(".passw").click(function() {
const passw = "12345678"; // 实际项目中应从 input 或 data 属性动态获取
$("#Password").html(function(i, oldHtml) {
if (oldHtml === passw) {
// 当前显示的是明文 → 切回原始掩码
return $(this).data("saved-pass") || "••••••••••";
} else {
// 当前显示的是掩码 → 保存原始掩码，显示明文
$(this).data("saved-pass", oldHtml);
return passw;
}
});
});✅ 关键优势说明：
立即学习“前端免费学习笔记（深入）”；
- 使用
.html(function(index, oldHtml) { ... })回调确保读取的是实时 DOM 当前内容，而非缓存副本； -
.data("saved-pass", value)将原始掩码安全绑定到该 DOM 元素，生命周期与元素一致，无需手动清理； - 比
if/else+.text()或.html()分离调用更健壮，彻底规避竞态（如快速连点导致状态不同步）。
⚠️ 注意事项：
- 此方案仅适用于展示型切换（如调试或受限 UI 场景）。生产环境强烈建议改用
<input type="password">，并切换type属性——它原生支持无障碍访问、键盘操作（如密码粘贴）、浏览器密码管理器集成，且更安全（避免明文长期驻留 DOM）； - 若需兼容旧版 jQuery（jquery-migrate 或验证
.data()行为一致性； - 密码明文（如
"12345678"）绝不应在前端硬编码，实际应用中应通过$("#myInput").val()动态读取，或由后端加密后透出安全令牌。
总结：用好 jQuery 的链式回调与数据绑定机制，可优雅解决看似简单的状态切换问题；但技术选型始终要回归最佳实践——优先采用语义化、标准化、安全的原生表单控件。
