点击输入框图标切换密码可见性：仅首个输入框生效问题

算力阿峰

2026-8-24

解决密码可见性切换仅对第一个输入框生效的问题

问题描述

点击密码输入框旁的图标时，仅第一个密码框的可见状态会切换；点击第二个确认密码框旁的图标，仍然只会修改第一个密码框的状态，无法操作第二个输入框。

问题原因

当前jQuery代码硬编码了第一个密码框的类选择器.dhe-form-control-user_password，无论点击哪个.dhe-form-add-on图标，都会选中这个固定的输入框进行修改，没有关联到当前点击图标对应的目标输入框。

解决方案

修改jQuery代码，利用this关键字定位当前点击的图标，再通过DOM结构关系找到对应的密码输入框，替代固定的类选择器。

修改后的代码：

jQuery(document).ready(function(){
  $('.dhe-form-add-on').on('click', function(){
    // 获取当前点击图标对应的前一个密码输入框
    const $targetInput = $(this).prev('.dhe-form-control');
    // 切换输入框的类型
    if($targetInput.attr('type') === 'password'){
      $targetInput.attr('type','text');
      // 切换图标为解锁样式
      $(this).find('i').removeClass('fa-lock').addClass('fa-unlock');
    }else{
      $targetInput.attr('type','password');
      // 切换图标为锁定样式
      $(this).find('i').removeClass('fa-unlock').addClass('fa-lock');
    }
  })
})

代码解释

$(this).prev('.dhe-form-control')：通过this获取当前点击的图标元素，再用prev()方法找到它前面紧邻的密码输入框，确保每个图标只操作自己对应的输入框。
图标状态同步：增加了图标类名的切换，从fa-lock变为fa-unlock，让用户直观感知当前密码的可见状态，提升交互体验。
通用选择器适配：使用.dhe-form-control通用类匹配所有密码输入框，避免依赖特定自定义类，代码兼容性更强。