UL 清单项目的“加载更多”

Question

我有一个无序列表：

<ul id="cont-new">
    <li>text 1</li>
    <li>text 2</li>
    <li>text 3</li>
    <li>text 4</li>
    <li>text 5</li>
    <li>text 6</li>
    <li>text 7</li>
    <li>text 8</li>
    <li>text 9</li>
    <li>text 10</li>
    <li>text 11</li>
    <li>text 12</li>
    <li>text 13</li>
    <li>text 14</li>
    <li>text 15</li>
</ul>

<a href="#" class="load-more">Load more</a>

Javascript

size_li = $("#cont-new li").size();

x_first = 8; 

$('#cont-new li:lt('+x_first+')').show();


 $(".load-more").click(function(e) 
 {
         x_first = (x_first+8 <= size_li) ? x_first+8 : size_li;

         $('#cont-new li:lt('+x_first+')').show();

       return false;
 });

我想：

1. 页面加载时 - 显示前 8 个项目；
2. 页面滚动 - 按 4 显示接下来的 8 个项目并显示“加载更多”链接；
3. 点击“加载更多” - 一次显示 4 个项目，接下来的 4 个项目显示在页面滚动并显示“加载更多”；
4. 重复第 3 步
5. 如果加载了所有项目，隐藏“加载更多”链接。

我怎样才能最好地做到这一点？

我创建了以下 jsfiddle：https://jsfiddle.net/rhsa0qyv/

Answer 1

使用.scroll 事件处理程序，您可以将代码附加到事件中，并在用户到达底部时进行注册，并附加另一个隐藏按钮的代码。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        x_first = (x_first+8 <= size_li) ? x_first+8 : size_li;
            $('#cont-new li:lt('+x_first+')').show();
    }
});

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $(".load-more").hide();
   }
});

在此处进行了更改：

https://jsfiddle.net/bjv6jvwo/1/

文档：

https://api.jquery.com/scroll/

Answer 2

也许这个会有所帮助 首先将 id 元素添加到您的 anchar 标签 前-<a href="#" id="LoadMore" class="load-more">Load more</a> 完成后，现在使用此代码更新您的 jquery

size_li = $("#cont-new li").size();

x_first = 8; 

$('#cont-new li:lt('+x_first+')').show();


 $(".load-more").click(function(e) 
 {
         x_first = (x_first+8 <= size_li) ? x_first+8 : size_li;

         $('#cont-new li:lt('+x_first+')').show();
     if(x_first==size_li){$('#LoadMore').hide();}
       return false;
 });

现在你会得到结果。