PHP+JS环境下点击眼睛图标仅显示首行密码的问题解决建议

问题根源与修改方案 #

问题原因 #

循环生成的密码输入框和眼睛图标使用了重复的ID（id_password和togglePassword），而document.querySelector()只会匹配DOM中第一个带有该ID的元素，导致点击任意行的图标都只会触发第一行的密码显示切换。

修改步骤 #

1. 调整PHP渲染代码（替换ID为类名）

把循环中的元素ID改成类名，避免重复标识问题：

<?php
$Allusers=mysqli_query($con,"select * from `users`  order by id asc");
while($users=mysqli_fetch_array($Allusers)){
    ?>
    <tr>
        <td><?php echo $users['id']; ?></td>
        <td><?php echo $users['full_name']; ?></td>
        <td>
                <input type="password" name="password" class="id_password" value="<?php echo $users['password']; ?>" >
                <i class="far fa-eye togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
        </td>
        <td><?php echo $users['status']; ?></td>
    </tr>
<?php
}
?>

2. 重写JavaScript逻辑（绑定所有图标事件）

通过类名获取所有眼睛图标，给每个图标绑定独立的点击事件，并利用DOM层级关系找到对应行的密码输入框：

// 获取所有眼睛图标
const togglePasswords = document.querySelectorAll('.togglePassword');

// 为每个图标绑定点击事件
togglePasswords.forEach(toggle => {
  toggle.addEventListener('click', function () {
    // 找到当前图标对应的密码输入框（相邻前兄弟元素）
    const password = this.previousElementSibling;
    // 切换密码框的显示类型
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // 切换图标样式
    this.classList.toggle('fa-eye-slash');
  });
});

补充说明 #

如果DOM结构有变动，也可以用父元素定位的方式找到密码框，兼容性更强：

// 替代previousElementSibling的写法
const password = this.closest('td').querySelector('.id_password');

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