如何使用jQuery切换元素的新旧HTML值？

需求说明 #

点击类名为passw的眼睛图标，切换id为Password的<span>元素内容：在圆点（•）和明文密码12345678之间切换。

现有HTML结构 #

<span id="Password">&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;</span> 
<i class="fa-regular fa-eye passw"></i>

原代码问题分析 #

你尝试的代码存在语法错误：jQuery没有html.toggle()或toggle.html()这类方法，toggle()是用于控制元素显示/隐藏的，无法直接实现内容切换。

正确实现代码 #

$(".passw").click(function(){
  // 缓存DOM元素，避免重复查找
  const $passwordSpan = $("#Password");
  const plainPassword = "12345678";
  // 生成与密码长度一致的圆点字符串
  const passwordDots = "•".repeat(plainPassword.length);

  // 判断当前显示状态，切换内容
  if ($passwordSpan.text() === passwordDots) {
    $passwordSpan.text(plainPassword);
    // 切换为闭眼图标（可选优化，提升交互体验）
    $(this).removeClass("fa-eye").addClass("fa-eye-slash");
  } else {
    $passwordSpan.text(passwordDots);
    // 切换回睁眼图标
    $(this).removeClass("fa-eye-slash").addClass("fa-eye");
  }
});

代码关键点说明 #

1. 缓存DOM元素：提前获取#Password的jQuery对象，减少DOM查询次数，提升性能。
2. 动态生成圆点：用repeat()方法生成与密码长度匹配的圆点，避免硬编码多个•，适配不同长度的密码。
3. 状态判断逻辑：通过对比当前文本内容，决定切换到明文还是圆点状态。
4. 图标切换优化：同步切换Font Awesome的眼睛/闭眼图标，让用户直观感知状态变化。

内容的提问来源于stack exchange，提问作者Drunken M