jquery - 无法切换 fontawesome 颜色

Question

我无法在单击时切换 fontawesome 图标的颜色。

 <a id="thumbsup">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a>

加载图标时，我希望它是灰色的。单击时，它应该是蓝色的。再次单击时，它应该变回灰色。 (图标本身是黑色的)。除了原始颜色之外，我们不能在超赞字体图标上的两种颜色之间切换吗？

当我尝试使用 toggleclass 在原始黑色和蓝色之间切换时，效果很好。

 //jquery
 $("#thumbsup").toggleclass("bluecolor");
 //css
 .bluecolor{
 color:#0026ff;
 }

但是，如果我最初尝试通过向 html 添加一个类将其设为灰色，则它会加载为灰色，但在使用 jquery 时不会切换为蓝色。

//html
<a id="thumbsup" class="graycolor">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a>
//css
.graycolor{
color:#999;
 }
//jquery
$("#thumbsup").toggleclass("bluecolor");

当我将上述逻辑应用于纯文本时，它会完美地切换。它是否不起作用，因为 fontawesome 本身是作为类加载的？是否有其他方法可以实现此目的？

Answer 1

您必须在 toggleClass 中指定这两个类:

$("#thumbsup").toggleClass("bluecolor graycolor");