Font-Awesome icon не изменится 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.

Возможно, текст «сохранить работу» в поле и цели изменит его текст на «loading ...»?

Answer 2

Вы можете toggleClass() или использовать addClass()removeClass() или

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