更改选项并重新初始化

Question

我使用jscroll 作为无限滚动寻呼机。

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    padding: 20,
    nextSelector: 'div.next a',
    contentSelector: '.latest-container',
    autoTrigger: true,
    autoTriggerUntil: 1
});

这是一个非常简洁的插件，它使用了我的项目必备的autoTriggerUntil。 使用该方法，您可以限制内容自动加载的时间并显示分页的“下一步”按钮。

我想要达到的就是这个。

1. 无限加载第一组帖子（实际上是第二页）。 （完成）
2. 在第 2 页之后，显示“全部加载”按钮。 （完成）
3. 1 和 2 都有效，但我想做的是：单击第 2 页上的“全部加载”后，我想破坏限制器并返回到无限视图直到结束。

我基本上需要以某种方式重新初始化它。在过去的几个小时里，我一直在搞乱间隔和其他不良做法，但没有任何结果。

Answer 1

挖掘后我得出了这个解决方案：-

首先，你需要像这样添加一个回调函数：-

$('.frontpage').jscroll({
    //your existing settings ,
    callback: function() {
      if ($('div.next a').is(":visible")) {
         $('.frontpage').jscroll.destroy();
         $('div.next a').off('click');
       }
    }
});

第二次在load all a标签中添加onclick属性（只在load all a标签可见的页面中)

onclick="loadAllClick(event);"

并且处理函数应该是这样的：-

  <script>
      var loadAllClick = function(e) {
           e.preventDefault();
           $('.frontpage').jscroll( //your settings 
                               );
          }
  </script>

和Here 是一个完整的工作样本 希望这能回答你的问题

Answer 2

您可以使用$(el).off() 方法和插件的callback 选项。

在插件页面http://jscroll.com/测试。

它可能看起来像这样：

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j('div.next a'); //Your 'next' selector
    el.off()
    el.on('click',function(e){
      e.preventDefault(); // we don't want the browser to go to redirect
      // Add your code to show the rest of the comments here.
  });
}

然后以相同的方式调用bind，但添加回调：

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    ...
    callback:scrollerCallback,
    autoTriggerUntil: 1
});

Answer 3

在你的回调函数中，尝试使用这个：

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j(document).find('div.next a');
    el.on('click',function(e){

      e.preventDefault();
      console.log("This call gets executed!");

      $j('.frontpage').jscroll({
        autoTrigger: false,
        autoTriggerUntil: false
      });

  });
}

当你这样做时会发生什么？我想您必须修改库本身才能使其正常工作，但我还不太确定...