Faking a load more with jQuery (no AJAX/PHP)

问题:

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!

回答1:

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/

回答2:

Create 4 DIVs and put 25 items into each one. Make the first visible and hide the other 3. Create a variable and set it to1, and create 2 links for paginating back and forward.

The logic would be simple: pressing any of the pagination links would check the local variable and make sure that after an increase or decrease it would still be valid, so 1,2,3 or 4. The you call your render function.

Your render function would do nothing else except hiding 3 divs of the 4, showing the one selected and disable the pagination links if needed.

---

For the expandable list create 1 show more link instead of the 2 paginarion links.

Your render function would in this case never hide a div, just show another one. When all 4 divs would be enabled then the show more link has to be hidden.

Hope this helps.

回答3:

Wrap chunks of your stuff in a DIV with style="display:none" and a class="hiddenMore" (or something).

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

 

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