在循环中,会出现如下所示的多个div。
<div id="author-id-3" class="follow-me">
<div class="author-follow">
<a id="3" class="meta-badge"><span class="icon-close"></span> Follow</a>
</div>
</div>
我使用ajax更新数据库中的数据。
jQuery('.author-follow').on('click', '.meta-badge', function(e) {
e.preventDefault();
var user_id = $('.author-follow a.meta-badge').attr('id');
$.ajax( {
...
beforeSend: function() {
$('.follow-me .author-follow').fadeOut( 'fast' );
$( '<div class="icon-loading"></div>' ).hide().appendTo('.follow-me').fadeIn( 'slow' );
},
success: function( data ) {
$('.follow-me .icon-loading').remove();
$('.follow-me').html( ajax_setting.ajax_follow_success ).hide().fadeIn( 'slow' );
console.log( user_id );
}
} )
});
这会导致在页面上单击任何特定按钮时,所有follow-me
div都会使用ajax_follow_success
函数进行更新。虽然它应该只出现在特定的按钮区域内。
我尝试使用:
$toggle = $(this).parent().parent().find('follow-me');
beforeSend: function() {
$toggle.fadeOut( 'fast' );
$( '<div class="icon-loading"></div>' ).hide().appendTo($toggle).fadeIn( 'slow' );
},
但后来我得到Uncaught ReferenceError: $toggle is not defined
我甚至尝试使用closest()
,但它也不能很好地工作(很可能因为我没有正确使用它)。
beforeSend: function() {
$(this).closest('.author-follow').fadeOut( 'fast' );
$( '<div class="icon-loading"></div>' ).hide().appendTo( $(this).closest('.follow-me') ).fadeIn( 'slow' );
},
非常感谢帮助我走上正轨的任何帮助。
修改
我也从一个稍微不同的角度接近它(没有成功)。
var div_id = $('.follow-me').attr('id');
beforeSend: function() {
$('#' + div_id + ' .author-follow').fadeOut( 'fast' );
$( '<div class="icon-loading"></div>' ).hide().appendTo('#' + div_id + '').fadeIn( 'slow' );
console.log( div_id );
},
答案 0 :(得分:1)
您错过了班级.
中的.find('follow-me')
字符,这意味着它正在搜索标记follow-me
而不是类。
$toggle = $(this).parent().parent().find('.follow-me');
// ^ use '.follow-me'