用jQuery偽裝更多負載（無AJAX / PHP）

Question

我在頁面上有一個數據列表，一個簡單的約有100個項目的有序列表，就像存檔頁面上的標題和摘錄一樣。

在頁面加載時，我想隱藏除前25個項目之外的所有項目，並可以選擇加載更多25個項目，然后再加載25個項目，直到它們全部可見為止。

我研究了簡單的分頁插件（例如jPaginate），但希望列表每次增加25。

只是對您的想法感到好奇-謝謝！

Answer 1

在所有項目之間共享一個通用類，並使用jQuery每次顯示更多元素。

<div class="listitem">list item 1</div>
<div class="listitem">list item 2</div>
<div class="listitem">list item 3</div>
<div class="listitem">list item 4</div>
<div class="listitem">list item 5</div>
<div class="listitem">list item 6</div>
<div class="listitem">list item 7</div>
<div class="listitem">list item 8</div>
<div class="listitem">list item 9</div>
<div class="more">showmore</div>

** jQuery **

$(".listitem").hide();
$(".listitem").slice(0, 2).show();

$(".more").click(function(){
    var showing = $(".listitem:visible").length;
    $(".listitem").slice(showing - 1, showing + 2).show();
});

供您參考： http : //api.jquery.com/slice/

編輯：這是一個jsFiddle，顯示了它的作用... http://jsfiddle.net/uQWGB/1/

Answer 2

用style =“ display：none”和class =“ hiddenMore”（或其他東西）將大塊東西包裝在DIV中。

<a href="javascript://" onclick="showMore(this)">more...</a>

function showMore(e) {
       $('.hiddenMore').eq(0).show()
       $(e).removeClass('hiddenMore')    
} 

Answer 3

創建4個DIV，然后每一個放入25個項目。 使第一個可見並隱藏其他三個。創建一個變量並將其設置為1，並創建2個用於前后分頁的鏈接。

邏輯很簡單：按任何分頁鏈接將檢查局部變量，並確保在增加或減小之后它仍然有效，因此1,2,3或4。您調用了render函數。

您的渲染功能除了隱藏4個div中的3個div（顯示所選的一個div）並禁用分頁鏈接（如果需要）之外，什么都不做。

---

對於可擴展列表，創建1個顯示更多鏈接，而不是2個paginarion鏈接。

在這種情況下，您的render函數將永遠不會隱藏div，而只會顯示另一個div。 如果所有4個div均啟用，則必須隱藏show more鏈接。

希望這可以幫助。