Javascript中多个字段的单眼图标

Question

我有一个密码和确认密码输入字段，我正试图使用密码字段中的eye图标来切换这两个字段的可见性。

我目前有代码：

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#pswd');
togglePassword.addEventListener('click', function (e) {
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
this.classList.toggle('fa-eye-slash');
});

切换密码的可见性，但我不知道如何将其用于第二个字段。

Answer 1

要使此功能适用于多个元素，需要将querySelectorAll()与class选择器一起使用。这将返回一个元素集合，然后可以循环使用这些元素来添加事件侦听器。

请注意，您需要使用一些DOM遍历方法来将单击的图标与密码字段关联起来。在下面的示例中，我使用了closest()和querySelector()的组合，但这需要根据HTML的结构进行更新。

document.querySelectorAll('.togglePassword').forEach(el => {
el.addEventListener('click', e => {
let password = el.closest('.toggle-container').querySelector('.pswd');
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
e.target.classList.toggle('fa-eye-slash');
});
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="toggle-container">
<input type="password" class="pswd" />
<i class="fa fa-eye fa-eye-slash togglePassword"></i>
</div>
<div class="toggle-container">
<input type="password" class="pswd" />
<i class="fa fa-eye fa-eye-slash togglePassword"></i>
</div>