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，将图标设置为“关闭”和“已关闭”状态：

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

添加字体真棒旋转cog到jquery点击功能？

1 个答案: