1

我正在尝试在博客页面上创建 ajax 分页。我需要做的是最初显示 5 个帖子，然后在单击“加载更多帖子”链接时再加载 5 个。

下面是我正在使用的 javascript：

<script>
    jQuery(document).ready(function() {
        // ajax pagination
        jQuery('.nextPage a').live('click', function() { 

            // if not using wp_pagination, change this to correct ID
            var link = jQuery(this).attr('href');

            // #main is the ID of the outer div wrapping your posts
            jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>');

            // #entries is the ID of the inner div wrapping your posts
            jQuery('.blogPostsWrapper').load(link+' .post')
        });
    }); // end ready function
</script>

问题是，当我单击链接时，旧帖子被新帖子替换，我需要显示旧帖子以及新帖子......

这是启用 ajax 分页的更新的 jQuery 代码。

jQuery(document).ready(function(){
jQuery('.nextPage a').live('click', function(e){
  e.preventDefault();
  var link = jQuery(this).attr('href');
  jQuery('.blogPostsWrapper').html('Loading...');
  jQuery('.blogPostsWrapper').load(link+' .post');
  });
  });

现在唯一的问题是旧帖子被删除了，我需要保留旧帖子和新帖子..

4

3 回答 3

1

这是我使用的最终代码，现在一切正常......

// Ajax Pagination
jQuery(document).ready(function($){
    $('.nextPage a').live('click', function(e)  {
    e.preventDefault();
    $('.blogPostsWrapper').append("<div class=\"loader\">&nbsp;</div>");

    var link = jQuery(this).attr('href');

    var $content = '.blogPostsWrapper';
    var $nav_wrap = '.blogPaging';
    var $anchor = '.blogPaging .nextPage a';
    var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

    $.get(link+'', function(data){
    var $timestamp = new Date().getTime();
    var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
    $('.blogPostsWrapper .loader').remove();
    $next_href = $($anchor, data).attr('href'); // Get the new href
    $($nav_wrap).before($new_content); // Append the new content
    $('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
    $('.netxPage a').attr('href', $next_href); // Change the next URL
    $('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation
    });

    });
}); // end ready function
于 2012-10-03T05:11:19.243 回答
0

你可以试试下面的代码吗？这就是我在自己的网站上进行这项工作的方式。

代替：

jQuery('.blogPostsWrapper').load(link+' .post')

和：

$.get(link+' .post', function(data){
$('.blogPostsWrapper').append(data);
});
于 2012-10-01T12:47:56.017 回答
0

您应该使用 jQuery append()添加新帖子而不使用旧帖子。

jQuery load()将替换元素中找到的数据。引用自 jQuery API：

.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数用途都非常简单：

于 2012-10-01T13:03:02.647 回答