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');

<小时/>

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

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