javascript - 显示隐藏密码
问题描述
我目前正在学习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>
解决方案
您必须像这样更改元素属性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>