问题
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