javascript - 如何为每个元素获取两个不同的事件( "querySelectorAll")？

Question

我的代码有问题。现在，如果我单击第一个元素，所有元素将变为红色，如果我第二次单击它们将变为绿色。我想为 fa-heart 类的每个元素设置两个独立的事件。我会更好地解释:如果我第一次点击第一个元素 DOM，只有这个元素会变成红色，如果我第二次点击它，它会变成绿色，所有其他元素也是如此。如果我的要求不清楚，我深表歉意。非常感谢您的帮助。

<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>
<a onclick="change()"><i class="fas fa-heart"></i></a>
<a onclick="change()"><i class="fas fa-heart"></i></a>
<a onclick="change()"><i class="fas fa-heart"></i></a>

<script>
 function change(){
      var a = document.querySelectorAll('.fa-heart');
      var qty = a.length;
      var i = 0;

      for(i; i<qty; i++){
         if(a[i].style.color !== 'red'){
             a[i].style.color = 'red';
         }else{
             a[i].style.color='green';
           }
     }
}
</script>

Answer 1

为每个 <i> 添加一个单独的监听器相反，在监听器中检查当前的 .style单击的元素的值来确定下一步要分配的内容:

document.querySelectorAll('.fa-heart').forEach((i) => {
  i.addEventListener('click', () => {
    i.style.color = i.style.color !== 'red'
      ? 'red'
      : 'green';
  });
});

<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>
<a><i class="fas fa-heart"></i></a>
<a><i class="fas fa-heart"></i></a>
<a><i class="fas fa-heart"></i></a>

或者，使用事件委托(delegate):

document.addEventListener('click', (e) => {
  if (!e.target.matches('.fa-heart')) {
    return;
  }
  e.target.style.color = e.target.style.color !== 'red'
    ? 'red'
    : 'green';
});

console.log('start');
setTimeout(() => {
  console.log('adding dynamic elements');
  document.body.innerHTML += `<a><i class="fas fa-heart"></i></a>
<a><i class="fas fa-heart"></i></a>
<a><i class="fas fa-heart"></i></a>`;
}, 1000);

<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>

如果您必须使用内联处理程序(您不应该这样做)，请传递 this (被点击的元素)到监听器:

function change(i) {
  i.style.color = i.style.color !== 'red'
    ? 'red'
    : 'green';
}

<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>