使用 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

创建 4 个 DIV，并在每个 DIV 中放入 25 个项目。使第一个可见并隐藏另一个 3. 创建一个变量并将其设置为 1，并创建 2 个用于前后分页的链接。

逻辑很简单：按任何分页链接都会检查局部变量，并确保在增加或减少后它仍然有效，因此 1、2、3 或 4。您可以调用渲染函数。

你的渲染函数除了隐藏 4 个 div 中的 3 个、显示所选的一个并在需要时禁用分页链接之外什么也不做。

---

对于可扩展列表，创建 1 个显示更多链接而不是 2 个分页链接。

在这种情况下，您的渲染函数永远不会隐藏 div，而只是显示另一个 div。当所有 4 个 div 都启用时，必须隐藏显示更多链接。

希望这有帮助。

Answer 3

将您的内容块包装在带有 style="display:none" 和 class="hiddenMore" （或其他内容）的 DIV 中。

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

 

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