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>

Java脚本

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;
 });

现在您将获得结果。