javascript - 使用 jQuery 伪造加载更多内容(无 AJAX/PHP)

Question

我在一个页面上有一个数据列表，一个大约 100 个项目的简单有序列表，只有一个标题和摘录，就像存档页面上一样。

在页面加载时，我想隐藏除前 25 个项目之外的所有项目，并可以选择加载另外 25 个项目，再加载 25 个项目，直到它们全部可见。

我研究过简单的分页插件，例如 jPaginate，但只是希望列表每次扩展 25。

只是好奇你的想法 - 谢谢!

Answer 1

在所有项目之间共享一个公共(public)类，并使用 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/