添加字體真棒旋轉齒輪jQuery點擊功能？

我需要在檢索數據時添加字體超棒旋轉齒輪，並在完成時將其刪除。添加字體真棒旋轉齒輪jQuery點擊功能？

這是要添加的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);

我一直在尋找了一段時間，但沒有一個例子我已經找到了足夠的樣子像我的腳本來實現它（我不是程序員）。

來源

2017-02-09 Michael Rogers

使用jQuery [addClass（）]（https://api.jquery.com/addclass/）你可以在執行ajax時添加需要的類，並且已經使用的代碼將類刪除，以便在'done'中再次使用該類來刪除它。 – Nope

正確看到我的答案。 – zer00ne

請 '走了' 狀態 '關' 和圖標通過刪除fa-cog和fa-spin像這樣：

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

添加以下內容：

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

and

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

請參閱片段，瞭解它們應該在哪裏。

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

代碼片段

(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>

來源

2017-02-09 16:20:14 zer00ne

嗨，感謝您的幫助。點擊按鈕後，是否可以讓齒輪顯示出來？我的意思是1.按鈕消失。 2，那麼齒輪似乎在旋轉。 3.當數據出現時，齒輪消失。 –

您是否刪除了根據我帖子頂部指示的div中的'fa-spin'？編輯更加明確， – zer00ne

是的，html是，但它始終顯示靜態齒輪。我想讓它在加載時顯示出來（點擊按鈕後）。我需要打印「」後點擊按鈕不添加類來旋轉它。我認爲存在誤解。 –

添加字體真棒旋轉齒輪jQuery點擊功能？

回答

相關問題