JQuery在HTML中更改图标

Question

我有这个HTML：

<i class="fa fa-toggle-on"></i>

只显示一个图标，如何使用jQuery将此类更改为fa fa-toggle-off？

我还希望能够将其更改回on

Answer 1

使用 toggleClass()

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

＆＃13;

＆＃13;

$('.fa').click(function() {
  $(this).toggleClass('fa-toggle-on fa-toggle-off');
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="fa fa-toggle-on"></i>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用toggleClass：

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