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...");
});

文本更改为加载，下载图标消失，但spinner图标永远不会显示！我错过了什么？！

Answer 1

这是因为.text（）函数正在移除 i 元素。

也许将“保存工作”文本放在一个范围内并将其文本更改为“加载...”？

Answer 2

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

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