Question

使用 JQuery 动态更改 AwesomeIcon 的类

2018-04-23

285

javascript jquery html font-awesome

我有这个很棒的图标

<i id="myIdAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>

我试图使用它来更改类

 $('myIdAwesomeIcon').addClass('fa fa-toggle-on fa-lg').removeClass('fa fa-toggle-off fa-lg');

有些东西改变了，但结果不是预期的：

Answer 1

最终结果是删除 fa 和 fa-lg 类。如果您只想将 toggle-on 更改为 toggle-off ，请使用 toggleClass() ，如下所示：

$('#myIdAwesomeIcon').toggleClass('fa-toggle-on fa-toggle-off');

Answer 2

您缺少 id 选择器的 # ，我建议先使用 removeClass ，然后使用 addClass 。由于您的 css 颜色太浅，因此在本例中我将颜色更改为 red 。

$('#myIdAwesomeIcon').removeClass('fa fa-toggle-off fa-lg').addClass('fa fa-toggle-on fa-lg');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="myIdAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:red;" aria-hidden="true">ss</i>

Answer 3

removeClass（'FA FA-TOGGLE-OFF FA-LG'）; 删除 fa ， fa-toggle-on 和 FA-LG 在您的情况下，您需要删除并仅添加唯一的类。因此，您的代码看起来如下：

124368075

注意：＃for ID和。对于课堂，需要作为jQuery中的选择器。