两个输入框密码显示/隐藏故障：确认密码框无响应

问题根源 #

1. toggle属性指向错误：确认密码框的眼睛图标toggle属性仍写的是#password，导致点击时操作的还是新密码框，而非确认密码框
2. DOM标签未闭合：确认密码区域的<span class="input-group-text">标签没有闭合，破坏了DOM结构，可能导致事件无法正常绑定
3. JS代码冗余：两个点击事件逻辑完全重复，没必要单独写两个函数

修正后的代码 #

HTML部分

<div class="mb-3">
  <label class="form-label">New password</label>
  <div class="input-group input-group-flat">
    <input type="password" name="password" id="password" class="form-control">
    <span class="input-group-text">
      <span toggle="#password" class="ti ti-eye toggle-password"></span>
    </span>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Confirm password</label>
  <div class="input-group input-group-flat">
    <input type="password" name="confirm_password" id="confirm_password" class="form-control">
    <span class="input-group-text">
      <span toggle="#confirm_password" class="ti ti-eye toggle-password"></span>
    </span>
  </div>
</div>

JS部分

$(".toggle-password").click(function() {
  $(this).toggleClass("ti-eye-off");
  var input = $($(this).attr("toggle"));
  input.attr("type", input.attr("type") === "password" ? "text" : "password");
});

说明 #

• 修正了确认密码框眼睛图标的toggle属性，使其指向正确的#confirm_password输入框
• 补充了未闭合的<span class="input-group-text">标签，确保DOM结构完整
• 合并了重复的JS逻辑，通过toggle属性动态获取对应输入框，代码更简洁易维护

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