Font-Awesome 图标不会改变 onclick

Question

这太简单了，但我无法让它工作！单击按钮时，我想将该按钮中的图标从 fa-download 更改为 fa-spinner，但 fa-spinner 不会显示！

我的HTML是：

<button id='save'><i class='fa fa-download' aria-hidden='true'></i> save work</button>

而我的 jQuery 是：

$('body').on('click', '#save', function(e){
   $('#save').find('i').toggleClass('fa-download fa-spinner');
   $("#save").text("loading...");
});

文本变为正在加载，下载图标消失，但微调器图标从未出现！我错过了什么？！

Answer 1

这是因为 .text() 函数正在删除您的 i 元素。

也许将 "save work" 文本放在一个跨度中并定位以将其文本更改为 "loading..."?

Answer 2

您可以 toggleClass() 或使用 addClass() 或 removeClass()

$('body').on('click', '#save', function(e){
   $(this).find('i').addClass('fa-download');
   $(this).find('i').removeClass('fa-spinner');
});

Font-Awesome icon won't change onclick