Question

点击它时，我无法切换fontawesome图标的颜色。

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

加载图标后，我希望它是灰色的。单击时，它应为蓝色。再次单击时，它应该恢复为灰色。（图标本身为黑色）。我们不能在一个fontawesome图标之间切换两种颜色，而不是原始颜色吗？

当我尝试使用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");

Answer 2

其toggleClass而非toggleclass。运行下面的代码段并点击该链接。

$("#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">

无法切换fontawesome颜色

2 个答案: