Question

使用AJAX我试图用微调器替换文本“Follow”，然后显示成功消息。

循环中的html代码如下所示：

<div id="author-id-3" class="km-follow-me">                         
    <div class="km-author-follow">
        <a id="3" class="km-meta-badge">Follow</a>
    </div>          
</div>

AJAX调用

jQuery('.km-author-follow').on('click', '.km-meta-badge', function(e) { 
  e.preventDefault();

  var $container = $(this).closest('.km-follow-me');

  $.ajax( {       
    ...     
    beforeSend: function() {
      $(this).closest('.km-follow-me km-author-follow').fadeOut( 'fast' );
      $( '<div class="icon-loading"></div>' ).hide().appendTo( $container ).fadeIn( 'slow' );     
    },
    success: function( data ) {
      $container.find('.icon-loading').remove();
      $container.html(data).hide().fadeIn( 'slow' );

    },    

  } )
});

我遇到的问题是beforeSend function内的文字“Follow”没有隐藏。微调器确实显示，成功消息也是如此。

都不是

$(this).closest('.km-follow-me').find('.km-author-follow').fadeOut( 'fast' );

也不是

$(this).closest('.km-follow-me km-author-follow').fadeOut( 'fast' );

正在运作。

有人能指出我正确的方向吗？

Answer 1

有一种更简单的方法可以做到这一点。

<div id="author-id-3" class="km-follow-me">                         
    <div id="spinner" style="display:none"><img src="/path/to/spinner" /></div>
    <div class="km-author-follow">
        <a id="3" class="meta-badge">Follow</a>
    </div>          
</div>

以下内容：

jQuery('.km-author-follow').on('click', '.km-meta-badge', function(e) { 
    e.preventDefault();
    let spinner    = document.getElementById("spinner");

    spinner.style.display = 'block';
    let container        = $(this).closest('.km-follow-me');
    container.style.display = 'none';

    $.ajax({       
        // .. do ajax call
    }).done(function(return) {
        spinner.style.display = 'none';
        container.style.display = 'block';
    })
});

当然，我省略了你想要的动画，但这说明了更简单的方法。

隐藏/揭示两个不同的div。

Answer 2

var $container = $(this).closest('.km-follow-me');

结束使用

$container.find('.km-author-follow').fadeOut( 'fast' );

取而代之的是。

我不知道为什么

$(this).closest('.km-follow-me').find('.km-author-follow').fadeOut( 'fast' );

第一个是

不起作用。它们几乎不一样吗？

在AJAX调用中使用jquery隐藏div

2 个答案: