Question

我的页面上有两个标签，每个标签都有infinite-scroll个不同的内容。切换选项卡时，会调用一个函数：

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>

Answer 1

我知道你有这个问题需要很长时间。但是我今天遇到了同样的问题，需要一段时间才能通过它。但我终于做到了。

插件将路径和当前页面存储在某个变量中......所以如果更改page_nav href并不重要。

因此，您不仅需要更改网址，还需要更改插件存储的变量。

首先，您需要了解无限卷轴将您的网址分为两部分，即网址和下一页编号。

将此视为您的page_nav。

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

在这种情况下，插件会将我的网址存储到 opts.path [0]

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

并将当前页面存储到 opts.state.currPage

假设您的新网址如下：

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

您可以看到，在这个新网址中，我将类别从所有更改为编程，将页面从 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。

Answer 2

很难说没有页面试验，但是......

除非您从第一个标签中删除内容，否则看起来您最终会在页面上使用相同ID（“#page-nav”）的多个元素，这在CSS中是非法的。您可能会发现jQuery只是返回第一个。您可以考虑使用基于类的解决方案而不是ID。

nextSelector无法在无限滚动中更新

2 个答案: