真棒字体图标不会更改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元素。

也许将“保存工作”文本放在一个跨度中，然后将其文本更改为“正在加载...”？

Answer 2

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

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