「加載更多」 爲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. 在頁面滾動 - 顯示接下來的8個項目4並顯示「加載更多」鏈接;
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標籤 EX- <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; 
}); 

現在你會得到結果。