DOM querySelectorAll 操作多个类

Question

我一直在尝试在我的项目中显示和隐藏密码功能，但仍然遇到 DOM 操作多个类的问题，我的想法是当我单击眼睛图标时，输入类型从密码更改为文本，这是我的代码

index.html

<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="OLD PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="NEW PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="CONFIRM PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>

app.js

const eyeIcon = document.querySelectorAll('.passwordToggle');
const passwordForms = document.querySelectorAll('.passwordForms');

function test(){
    <!-- I'm not sure with 'this' -->
    const type = this.getAttribute('type') === 'password' ? 'text' : 'password';
    this.setAttribute('type', type);


    this.classList.toggle('fa-eye-slash');
}

for (let i = 0; i < eyeIcon.length; i++){
    eyeIcon[i].addEventListener('click',test)
}

我可以切换眼睛图标，但不能切换输入类型，我应该更改什么？

Answer 1

this 将属于附加事件处理程序的元素。

在您的情况下，这将是 i 图标。你想得到它兄弟姐妹的孩子。

this.parentNode// parent Node
this.parentNode.querySelector('input') //first input element in the parent

在你的测试函数中使用它

    const type = this.parentNode.querySelector('input').getAttribute('type') === 'password' ? 'text' : 'password';
    this.parentNode.querySelector('input').type = type;

Answer 2

您的问题是 this 是侦听器附加到的元素，而不是您要更改其类型的输入元素。您可以通过从“eye”元素到最近的祖先 div，然后向下到第一个输入或具有类“.passwordForms”的元素来获取输入，例如

function toggleType(evt) {
  // Up to ancestor div
  let el = this.closest('div');
  // Down to .passwordForms element
  let inp = el.closest('div').querySelector('.passwordForms');
  // Toggle type
  inp.setAttribute('type', inp.getAttribute('type') == 'text'? 'password' : 'text');
}

// Attach listeners
window.onload = function() {
  document.querySelectorAll('.passwordToggle').forEach(el =>
    el.addEventListener('click', toggleType)
  );
}

<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="OLD PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle">eye</i>
</div>
<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="NEW PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle">eye</i>
</div>
<div class="input">
    <div class="password">
        <i class="far fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="CONFIRM PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle">eye</i>
</div>

Answer 3

你可以这样做：

// Select all 'eye' icons and, for each of them...
document.querySelectorAll('.passwordToggle').forEach(item => {
    // ... add an event listener for the 'click' event, which...
    item.addEventListener('click', () => {
    // ... selects the corresponding input element...
    const inputElement = item.parentElement.querySelector('.password > input');
    // ... and toggle its type
    inputElement.type = inputElement.type === 'text' ? 'password' : 'text';
  });
})

<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="OLD PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="NEW PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="text" class = "passwordForms" name="" value="" placeholder="CONFIRM PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>

<!-- The following line is not necessary, I am including it only to display the icons in the snippet -->
<script src="https://kit.fontawesome.com/a4e29af29a.js" crossorigin="anonymous"></script>

[编辑] 如果需要，您也可以切换“眼睛”图标：

function toggleEyeIcon(iconElement) {
  iconElement.classList.toggle('fa-eye');
  iconElement.classList.toggle('fa-eye-slash');
}

function toggleInputType(inputElement) {
  if (inputElement.type === 'text') {
    inputElement.type = 'password';
  } else {
    inputElement.type = 'text';
  }
}

// Select all 'eye' icons and, for each of them...
document.querySelectorAll('.passwordToggle').forEach(item => {
    // ... add an event listener for the 'click' event, which...
    item.addEventListener('click', event => {
    // ... selects the corresponding input element...
    const inputElement = item.parentElement.querySelector('.password > input');
    // ... toggle its type...
    toggleInputType(inputElement);
    // ... and toggle the 'eye' icon CSS class
    toggleEyeIcon(item);
  });
})

<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="password" class = "passwordForms" name="" value="" placeholder="OLD PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="password" class = "passwordForms" name="" value="" placeholder="NEW PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>
<div class="input">
    <div class="password">
        <i class="fas fa-lock"></i>
        <input type="password" class = "passwordForms" name="" value="" placeholder="CONFIRM PASSWORD">
    </div>
    <i class="fas fa-eye passwordToggle"></i>
</div>

<!-- The following line is not necessary, I am including it only to display the icons in the snippet -->
<script src="https://kit.fontawesome.com/a4e29af29a.js" crossorigin="anonymous"></script>