3

ページに 2 つのタブがあり、それぞれに異なるコンテンツの無限スクロールがあります。タブが切り替わると、次のように関数が呼び出されます。

function callInfScroll(newlink){
var $container = '#main';
$('#page-nav').find('a').attr('href',newlink);
$container.load(newlink, function(){
  $container.infinitescroll({
    loading: {
        finishedMsg: "This is it"
    },

    navSelector  : '#page-nav',
           // selector for the paged navigation 
    nextSelector : '#page-nav a',
                   // selector for the NEXT link (to page 2)
    itemSelector : '.item',
                   // selector for all items you'll retrieve
    errorCallback: function(){
        $('#page-nav').html("Congratulations! You have reached the end of internet.");
        $('#page-nav').css({display: 'block'});
    }
  });

});
}

問題は、値#page-nav aが変更されているにもかかわらず、変更が無限スクロールに反映されておらず、最初のタブから古い値を取得していることです。

編集：私のHTML：

    <div id="main-container" class="span8">
        <div id="main">
        </div>
        <div id="page-nav">
            <a href=""></a>
        </div>    

    </div>
4

2 に答える 2

2

この問題が発生してから長い時間が経ちました。しかし、私は今日、このまったく同じ問題を乗り越えました。しかし、私はついにやった。

プラグインは、パスと現在のページを変数に保存します...したがって、page_nav href を変更しても問題ありません。

そのため、URL を変更するだけでなく、プラグインによって保存されている変数も変更する必要があります。

まず、無限スクロールが URL を URL と次のページ番号の 2 つの部分に分割することを理解する必要があります。

これを page_nav と考えてください。

<div id="page_nav" style="display: none;">
    <a href="http://localhost/trunx/blog/page/all/4">Próxima Página »</a>
</div>

この場合、プラグインは URL をopts.path[0]に保存します。

http://localhost/trunx/blog/page/all/

現在のページをopts.state.currPageに保存します

新しい URL が次のようになっているとします。

http://localhost/trunx/blog/page/programing/1

この新しい URL で、カテゴリをすべてからプログラミングに変更し、ページを4から1に変更したことがわかります。

私がしたことは：

var newPath = 'http://localhost/trunx/blog/page/programing/';
var newPage = 1;

// Changes the page_nav href.
$('#page_nav a').attr('href', newPath+newPage);

// Changes the plugin's stored variables
$('.postsBlog').infinitescroll({path:[newPath,''],state: {currPage:newPage-1}});

// This resets the pagination binder so if you had reached the end,it will now start paginating again.
$('.postsBlog').infinitescroll('bind');

.postsBlogは、infiniteScroll が適用されるコンテナーであると考えてください。

新しい currPage を設定すると、そこから 1 が減算されることがわかります。これは、次のページを設定するときに Infinity Scroll が自動的に合計 1 になるためです。

于 2013-12-17T20:43:27.087 に答える
0

実験するページがないとわかりにくいですが...

最初のタブからコンテンツを削除しない限り、ページ上に同じID（ " #page-nav"）を持つ複数の要素が表示されることになります。これはCSSでは違法です。おそらく、jQueryが最初のものを返していることに気付くでしょう。IDの代わりにクラスベースのソリューションを使用することを検討してください。

于 2013-03-15T08:30:58.270 に答える