HTML-Javascript-单击后更改图标的颜色

在这个JSFIDLE上，我想在图标被喜欢（在“不喜欢”上）后将其颜色更改为红色，如果图标在“喜欢”上，则将颜色设置为黑色：

HTML

CSS

---

现场演示：

我已将颜色添加到

.far

类中

.open .far {
  color: red;
}

JS

您可以在

.far

或

.fas

类上使用css规则来获得所需的输出

编辑

---

如果您有两个按钮，您可以向第二个按钮添加另一个类，并像这样使用CSS选择器，

您可以使用CSS规则实现这一点：

.liketoggle i.fas {
  color: red;
}

---

您只需添加两个类“like”和“inspect”，添加您想要的颜色，然后在单击时进行切换，即可完成此操作

CSS:

JS:

---

您所能做的就是在单击时切换图标。见先前的帖子：

---

希望这有帮助，但如果我需要保留同一个图标“far fa heart”并将其颜色更改为红色，该怎么办。（忘了在问题中提到这一点）在某些情况下这是正确的。默认情况下，如果按钮处于“不象”状态，该怎么办。请参阅下面的JSFIDLE，这种情况下的解决方案是什么？默认情况下“Like”需要为黑色，“inference”默认为红色。在JSFIDLE中，默认情况下两者都是黑色的。默认情况下，如果按钮处于“不象”状态，该怎么办。请参阅下面的JSFIDLE，这种情况下的解决方案是什么？默认情况下，“喜欢”必须是黑色，“不喜欢”必须是红色。在JSFIDLE中，两者都是默认的红色，您只需根据自己的喜好切换css颜色。可以将类和文本添加到HTML中，以特定颜色开始。

body {
  padding: 5em;
}

.open .far {
  color: red;
}

 $(".liketoggle").click(function() {
   $(this).toggleClass("open");
   $(this).find("span").text(function(i, v) {
     return v === 'Like' ? 'Unlike' : 'Like'
   })
 });

.liketoggle i.fas {
  color: red;
}

.like .fa-heart{
  color: red;
}
.unlike .fa-heart{
  color: black;
}

 $(".liketoggle").click(function() {
   $(this).toggleClass("like unlike");
   $(this).find("span").text(function(i, v) {
     return v === 'Like' ? 'Unlike' : 'Like'
   })
 });