javascript - 将 Font Awesome 旋转齿轮添加到 jquery 点击功能？

Question

我需要在检索数据时添加 font awesome spinning cog，并在完成后将其删除。

这是要添加的 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 使图标保持“关闭”和“消失”状态，如下所示:

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

添加以下内容:

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

和

$('.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>