使用jQuery（不使用AJAX / PHP） [英] Faking a load more with jQuery (no AJAX/PHP)

问题描述

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

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

我已经研究过简单像jPaginate这样的分页插件，但只是简单地将列表每次扩展25。

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

解决方案

 < div class =listitem>所有商品中的通用类，并使用jQuery来显示更多元素。列表项目1< / div> 
< div class =listitem>列表项目2< / div> 
< div class =listitem>列表项目3< / div> 
< div class =listitem>列表项目4< / div> 
< div class =listitem>列表项目5< / div> 
< div class =listitem>列表项目6< / div> 
< div class =listitem>列表项目7< / div> 
< div class =listitem>列表项目8< / div> 
< div class =listitem>列表项9< / div> 
< div class =more> showmore< / div> 
  

** jquery **

<$ p 。$ p> $（ 列表项）隐藏（）;
$（。listitem）。slice（0，2）.show（）;
$ b $（。more）。click（function（）{
var showing = $（。listitem：visible）。length;
$（。listitem ）.slice（显示 - 1，显示+ 2）.show（）;
}）;


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

编辑：
下面是一个jsFiddle，它显示了这个动作...
http://jsfiddle.net / uQWGB / 1 /

I have a list of data on a page, a simple ordered list of around 100 items, just a title and excerpt like on an archive page.

On page load, I want to hide all but the first 25 items with an option to load 25 more, 25 more until they're all visible.

I've looked into simple pagination plugins like jPaginate but would simply like the list to expand by 25 every time.

Just curious of your thoughts - thanks!

解决方案

Share a common class among all your items and use jQuery to show more elements each time.

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

** the jquery **

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

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

For your reference: http://api.jquery.com/slice/

Edit: Here's a jsFiddle showing this in action... http://jsfiddle.net/uQWGB/1/

这篇关于使用jQuery（不使用AJAX / PHP）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！