Font-Awesome icon won't change onclick

时间秒杀一切 提交于 2019-12-13 10:24:33

问题


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!

My HTML is:

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

And my jQuery is:

$('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?!


回答1:


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..."?




回答2:


You can either toggleClass() or use addClass() or removeClass()

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


来源:https://stackoverflow.com/questions/41147392/font-awesome-icon-wont-change-onclick

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!