显示/隐藏密码

Question

我目前正在学习 JavaScript。当我只有一个输入时，它可以正常工作，但是当我有多个输入时，我对循环遍历图标和输入框感到困惑。你认为问题出在哪里？对不起，我的英语不好，请您见谅。希望您了解我的意思。

const inputs = document.querySelectorAll('.show-hide-password');
const icon = document.querySelectorAll('i.password');

// Experiment 1
icon.forEach(function (ele) {
   ele.addEventListener('click', function (e) {
      const targetInput = e.target.previousElementSibling.getAttribute('type');
      if (targetInput == 'password') {
          targetInput.type = 'text';
          ele.classList.remove('fa-eye-slash');
          ele.classList.add('fa-eye');
      } else if (targetInput == 'text') {
          targetInput.type = 'password';
          ele.classList.add('fa-eye-slash');
          ele.classList.remove('fa-eye');
      }
   });
});

// Experiment 2
// icon.forEach(function (ele) {
//   ele.addEventListener('click', function (e) {
//      inputs.forEach(function (input) {
//         const targetInput = input.getAttribute('type');
//         if (targetInput == 'password') {
//             targetInput.type = 'text';
//             ele.classList.remove('fa-eye-slash');
//             ele.classList.add('fa-eye');
//          } else if (targetInput == 'text') {
//             targetInput.type = 'password';
//             ele.classList.add('fa-eye-slash');
//             ele.classList.remove('fa-eye');
//          }
//      });
//   });
//});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="form-group">
   <label>New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>
<div class="form-group">
   <label>Confirm New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>

- Tom-Cat

Answer 1

你需要使用Element.setAttribute来改变元素的属性，像这样：

const inputs = document.querySelectorAll('.show-hide-password');
const icon = document.querySelectorAll('i.password');

// Experiment 1
icon.forEach(function (ele) {
   ele.addEventListener('click', function (e) {
      const targetInput = e.target.previousElementSibling.getAttribute('type');
      if (targetInput == 'password') {
          e.target.previousElementSibling.setAttribute('type', 'text');
          ele.classList.remove('fa-eye-slash');
          ele.classList.add('fa-eye');
      } else if (targetInput == 'text') {
          e.target.previousElementSibling.setAttribute('type', 'password');
          ele.classList.add('fa-eye-slash');
          ele.classList.remove('fa-eye');
      }
   });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="form-group">
   <label>New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>
<div class="form-group">
   <label>Confirm New Password</label>
   <input type="password" class="form-control show-hide-password" autocomplete="off" required>
   <i class="fa fa-eye-slash password"></i>
</div>

- Guerric P

---

e.target.previousElementSibling.setAttribute('type', 'text'); 和 targetInput.type = 'text'; 有什么不同？@GuerricP - Tom-Cat

一旦使用 getAttribute 提取了属性，它就不再与元素相关联，因此您需要使用 setAttribute，否则新值仅设置为 targetInput 对象，并且没有任何效果。 - Guerric P

谢谢您的回答和解释，也感谢您抽出时间。 - Tom-Cat