使用 jQuery 伪造更多负载（无 AJAX/PHP）答案

【问题标题】：Faking a load more with jQuery (no AJAX/PHP)使用 jQuery 伪造更多负载（无 AJAX/PHP）
【发布时间】：2011-08-04 19:51:21
【问题描述】：

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

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

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

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

【问题讨论】：

听起来像一个计划，你应该尝试一下，如果你有问题，回来问一些具体的问题，最好是涉及代码。
也许类似于...点击“显示更多”找到先前被 jQuery 隐藏的第一个项目，遍历下一个 25 并淡入，等等...？跨度>

标签： javascript jquery html load

【解决方案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/

【讨论】：

他说不用php，不知道对他有没有帮助
@Wesley Murch 是的，我误读了标题，以为他想要 php 而不是 ajax。虽然编辑了答案...
我认为您仍然需要removeClass('listitem') 才能使此功能多次工作，并响应单击某些内容。
是的，这只是一种不同的技术。我不同意每次在所有元素上运行hide()，添加/删除类或data- 属性在真实站点上可能会更有效且错误更少（或将每5个元素包装在另一个div中） - 但是我已经尽可能多地支持您的帖子，因为这确实有效并且不值得 DV。
猜你是对的。更新了我每次不隐藏的方法。我不同意删除课程，以防他也想倒退（隐藏最后 25 个）等等。

【解决方案2】：

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

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

除了隐藏 4 个 div 中的 3 个 div 之外，您的渲染函数不会做任何其他事情，显示选中的 div 并在需要时禁用分页链接。

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

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

希望这会有所帮助。

【讨论】：

【解决方案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')    
}

【讨论】：

不确定，这应该可以正常工作。可能是因为您的创作/示例代码风格有点草率。