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 に答える