jQuery：通过ajax获取下一页并附加动画

2023年6月3日 222次阅读

我正在使用
jquery在我的wordpress博客上获得下一页,找到所需的div并将其附加到现有的div.这部分没有问题.但是,我需要做的是,向其添加slideDown动画.

这是我迄今为止的工作代码的样子：

$.get(next_page, function(data) {
    var response = $(data);
    var more_div = $(response).find('.FeaturedRow1').html();
    $('.FeaturedRow1').append(more_div).slideDown('slow');
    $('.navigation').not(':last').hide();

我尝试将hide()添加到response,more_div以及追加行.在第一种情况下,我收到错误声明它无法设置undefined的属性显示.
在第二种情况下,在控制台中它显示HTML并说“没有方法隐藏”.我也尝试添加一行$(more_div).hide()但是再次,我得到错误“未捕获的TypeError：无法设置属性’显示’未定义”.
如果我在第3行使用hide

$('.FeaturedRow1').hide().append(more_div).slideDown('slow');

它隐藏了整个FeaturedRow1 div并激活了它,它将我带到div的顶部,这是我不想要的.

编辑：这是所需部分的重要HTML结构和jQuery代码

<div class="FeaturedRow1">
  <div class="postspage">
    //list of posts here
  </div>
  <div class="navigation">
    <span class="loadless">
      //hyperlink to previous page
    </span>
    <span class="loadmore">
      //hyperlink to next page
    </span>
  </div>
</div>

当您单击loadmore内的超链接时,将调用以下jQuery代码

$('.loadmore a').live('click', function(e) {
    e.preventDefault();
    var next_page = $(this).attr('href');
    $.get(next_page, function(data) {
        var $response = $(data);
        var $more_div = $response.find('.FeaturedRow1').hide();
        $more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow')
        $('.navigation').not(':last').hide();
    });
});
$('.loadless').live('click', function(e) {
    e.preventDefault();
    if ($('.postpage').length != 1) {
        $('.postpage').last().remove();
    } 
    $('.navigation').last().remove();
    $('.navigation').last().show();
});

最佳答案 当您使用返回字符串而不是jQuery对象的html方法时,您会收到错误,请尝试以下操作.

var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow');
//$('.navigation').not(':last').hide();

更新：

$.get(next_page, function(data) {
    var $response = $(data);
    var more_div = $response.find('.FeaturedRow1').html();
    $('<div/>').hide()
               .append(more_div)
               .appendTo('.FeaturedRow1')
               .delay(100)
               .slideDown('slow')
    $('.navigation').not(':last').hide();
});
点赞