Javascript 我怎样才能用“获得两个不同的事件？”；“查询选择全部”；对于每个元素？

我的代码有问题。现在，如果我单击第一个元素，所有元素都将变为红色，如果我再次单击，它们将变为绿色。我想有两个独立的事件，每个元素与类fa心脏。我会更好地解释：如果我第一次单击第一个元素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>

函数更改（）{
var a=document.queryselectoral（'.fa heart'）；
变量数量=a.长度；
var i=0；
对于（i；i将单个侦听器添加到每个
中，然后在侦听器中，检查单击元素的当前
.style
，以确定下一步要分配什么：


document.queryselectoral（'.fa heart'）.forEach（（i）=>{
i、 addEventListener（'单击'，（）=>{
i、 style.color=i.style.color！=“红色”
“红色”
：“绿色”；
});
})；
给你。这会将单击的一个更改为绿色，其他更改为红色


功能更改（单击）{
document.queryselectoral（'a'）.forEach（el=>el.setAttribute（“样式”，“颜色：红色”））；
单击.style.cssText=“颜色：绿色；”；
}

谢谢你的回答，但我必须像我的示例中那样使用onclick内联！你真的不应该这样做-这被广泛认为是非常糟糕的做法。为什么你不能使用Javascript正确地附加事件？我想你可以改为在内联处理程序中传递
这个
，但这不是一个好主意，肯定有更好的方法试图在Joomla上编辑一个wishlist插件，这段代码已经内联了onclick，因为它是Ajax请求。在同一代码中附加两次单击事件（onclick和click）不错？很抱歉，如果我的问题是愚蠢的，那么如果元素是动态添加的，那么最好使用事件委派，请参阅我答案中第二个片段中给出的示例