密码切换图标功能异常求助：点击响应延迟且图标消失

问题根源 #

你的代码逻辑存在类切换错误，导致图标状态混乱：

• 初始图标元素带有fa-eye-slash类，第一次点击时仅添加fa-eye类，此时两个Font Awesome图标类同时存在，渲染冲突，看起来像是未切换；
• 后续点击仅针对当前输入框类型对应的类做toggle操作，未同步处理另一个互斥类，导致类列表逐渐混乱，最终所有图标类被移除，图标消失。

修复方案 #

正确逻辑是同步切换两个互斥的图标类，确保同一时间只有一个图标类存在。修改后的JavaScript代码如下：

const pass = document.getElementById("pass");
const togglePassword = document.getElementById("togglePass");

togglePassword.addEventListener("click", function() {
  // 切换密码输入框类型
  const isPasswordType = pass.type === "password";
  pass.type = isPasswordType ? "text" : "password";
  
  // 同步切换图标类：一次toggle两个互斥类，自动完成移除/添加
  togglePassword.classList.toggle("fa-eye");
  togglePassword.classList.toggle("fa-eye-slash");
});

修复逻辑说明 #

• 初始状态：输入框为password类型，图标带有fa-eye-slash类；
• 第一次点击：输入框切换为text类型，toggle("fa-eye")添加该类，toggle("fa-eye-slash")移除该类，图标正常显示为眼睛；
• 第二次点击：输入框切回password类型，toggle("fa-eye")移除该类，toggle("fa-eye-slash")添加该类，图标切回带斜杠的眼睛；
• 每次点击都会严格同步输入框类型和图标状态，不会出现类冲突或缺失的情况。

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