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>

或者，使用事件委托：

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>

Answer 2

您在这里。这会将单击的一个更改为绿色，将其他更改为红色。

function change(clicked) {
  document.querySelectorAll('a').forEach(el => el.setAttribute("style", "color:red"));
  clicked.style.cssText ="color: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>

如何为每个元素使用“ querySelectorAll”获得两个不同的事件？

2 个答案: