jqueryクリック機能にすばらしいスピニングコグを追加するには？

Question

データが取得されている間に素晴らしいフォントを追加し、完了したら削除する必要があります。

この

を追加するhtmlです：

<i class="fa fa-spin fa-cog"></i> 

そして、これはスクリプトです：

(function($) { 
    $('.acf-get-content-button').click(function(e){ 
    e.preventDefault(); 
    var $contentWrapper = $('#acf-content-wrapper'); 
    var postId = $contentWrapper.data('id'); 

    $.ajax({ 
     url: "/field-ajax.php", 
     type: "POST", 
     data: { 
     'post_id': postId 
     }, 
    }) 
     .done(function(data) { 
     $contentWrapper.append(data); 
     $('.acf-get-content-button').removeClass().addClass('.acf-get-content-button') 
     }); 
    }); 
    $('.acf-get-content-button').mouseup(function(){ 
     if (event.which == 1) { 
     $(".acf-get-content-button").hide(); 
     } 
     }); 
})(jQuery); 

私はしばらくの間、検索されているが、例のどれも私は十分に見ていませんしました私のスクリプトのように実装する（私はプログラマーではない）。

Answer 1

fa-cogを除去することにより、状態 '消え' 'オフ' とのアイコンを保ち、fa-spinそうのように：

$('.fa').addClass('fa-cog fa-spin') 

：

<i class="fa"></i> 

次の行を追加します。

および

$('.fa').removeClass('fa-cog fa-spin') 

は、彼らがあるべき場所へとスニペットを参照してください。

REFERENCE：https://api.jquery.com/category/manipulation/class-attribute/

SNIPPETのjQueryを使用して

(function($) { 
 
    $('.acf-get-content-button').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.fa').addClass('fa-cog fa-spin'); 
 
    var $contentWrapper = $('#acf-content-wrapper'); 
 
    var postId = $contentWrapper.data('id'); 
 

 
    $.ajax({ 
 
     url: "/field-ajax.php", 
 
     type: "POST", 
 
     data: { 
 
      'post_id': postId 
 
     }, 
 
     }) 
 
     .done(function(data) { 
 
     $('.fa').removeClass('fa-cog fa-spin'); 
 
     $contentWrapper.append(data); 
 
     $('.acf-get-content-button').removeClass().addClass('.acf-get-content-button') 
 
     }); 
 
    }); 
 
    $('.acf-get-content-button').mouseup(function() { 
 
    if (event.which == 1) { 
 
     $(".acf-get-content-button").hide(); 
 
    } 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i class='fa'></i>