真棒字体图标不会更改onclick [英] Font-Awesome icon won't change onclick

问题描述

这是如此简单，但我无法使它正常工作！单击按钮后，我想将该按钮中的图标从fa-download更改为fa-spinner，但是fa-spinner不会显示！

This is so simple, but I can't get it to work! On clicking a button, I'd like to change the icon in that button from fa-download to fa-spinner, but the fa-spinner just won't show up!

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

文本更改为加载，下载图标消失，但微调器图标永不显示！我想念什么?！

The text changes to loading, the download icon goes away, but the spinner icon never shows up! What am I missing?!

推荐答案

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

This is because the .text() function is removing your i element.

也许将保存工作"文本放在一个跨度中，并以将其文本更改为正在加载..."作为目标?

Maybe put the "save work" text in a span and target that to change its text to "loading..."?

这篇关于真棒字体图标不会更改onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！