如何让密码显示/隐藏图标点击仅作用于当前点击的图标

问题出在你使用了全局类选择器（$(".icon-ojo-abierto")），每次点击都会修改页面上所有同名图标，导致两个密码框的图标同步变化。要解决这个问题，核心是只操作当前点击图标所在的密码组内的元素，完全不需要修改图标类名。

步骤1：合并为通用切换函数 #

把四个冗余的函数整合为一个通用函数，通过传入当前点击的图标元素，精准定位到对应的密码组，只操作组内的图标：

function togglePassword(inputId, trigger) {
    const passwordInput = document.getElementById(inputId);
    // 找到当前图标所在的密码组容器（需要给每个密码输入框+图标套一个class为password-group的div）
    const group = $(trigger).closest('.password-group');
    const isPasswordType = passwordInput.type === 'password';

    // 切换输入框的显示类型
    passwordInput.type = isPasswordType ? 'text' : 'password';
    // 仅切换当前组内的图标显示状态
    group.find('.icon-ojo-abierto').toggleClass('d-none', !isPasswordType);
    group.find('.icon-ojo-cerrado').toggleClass('d-none', isPasswordType);
}

步骤2：调整HTML绑定结构 #

给每个密码输入框和对应图标包裹一个容器，确保点击图标时能精准定位到所属组：

<!-- 原密码输入组 -->
<div class="password-group">
    <input type="password" id="password">
    <i class="icon-ojo-cerrado" onclick="togglePassword('password', this)"></i>
    <i class="icon-ojo-abierto d-none" onclick="togglePassword('password', this)"></i>
</div>

<!-- 重复密码输入组 -->
<div class="password-group">
    <input type="password" id="passwordConfirmation">
    <i class="icon-ojo-cerrado" onclick="togglePassword('passwordConfirmation', this)"></i>
    <i class="icon-ojo-abierto d-none" onclick="togglePassword('passwordConfirmation', this)"></i>
</div>

核心逻辑说明 #

• 通过$(trigger).closest('.password-group')锁定当前点击图标所属的密码组，彻底避免全局操作所有同名图标
• 用toggleClass替代手动添加/移除d-none，简化显示切换逻辑
• 合并函数后减少冗余代码，后续维护更便捷

内容的提问来源于stack exchange，提问作者Enrique Carricoba Monterde