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

現在您將獲得結果。