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个项目放入每个DIV中。使第一个可见并隐藏另一个3.创建一个变量并将其设置为1，并创建2个链接以进行前后分页。

逻辑很简单：按下任何分页链接都会检查局部变量并确保在增加或减少之后它仍然有效，所以1,2,3或4.你调用你的渲染函数

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

对于可扩展列表，create 1显示更多链接而不是2个paginarion链接。

你的渲染功能在这种情况下永远不会隐藏div，只显示另一个。当所有4个div都被启用时，必须隐藏show more链接。

希望这有帮助。

使用jQuery伪装一个负载（没有AJAX / PHP）

3 个答案: