无法切换 fontawesome 颜色

Question

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

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

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

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

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

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

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

当我在纯文本上应用上述逻辑时，它会切换 perfectly.Is 它不起作用，因为 fontawesome 本身被加载为 class？是否有其他方法可以实现此目的？

Answer 1

它是 toggleClass 而不是 toggleclass。运行下面的代码段并单击 link。

$("#thumbsup").click(function(e){
    $("#thumbsup").toggleClass("bluecolor");
});

.graycolor{
    color:#999;
 }
.bluecolor{
    color:#0026ff;
 }

<a href="#" id="thumbsup" class="graycolor"><i class="fa fa-2x fa-thumbs-up"></i> Thumbs Up!</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Answer 2

您必须在 toggleClass:

中同时指定类

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

无法切换 fontawesome 颜色

Unable to toggle fontawesome color

jquery

css

font-awesome