使用JQuery动态更改AwesomeIcon的类

Question

我有这个很棒的图标

<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。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

fa删除了fa-toggle-on，fa-lg和$('#myIdAwesomeIcon').addClass('fa-toggle-on').removeClass('fa-toggle-off'); ，您需要删除并添加唯一的类。因此，您的代码如下所示：

counter = counter …

注意：＃为id和。 for class是jQuery中的选择器。