Question

我有一个包含40个项目的页面。但我不希望所有40个故事一次显示在一个页面上。我没有ajax知识。因此，如果不使用任何ajax，我如何在我的页面上实现显示更多功能，通过使用纯 jquery / js {{1}在我的页面上一次只显示10个项目}或hide()而不是ajax？

Answer 1

尝试：

HTML：

<div id="text1">text</div>
<div id="text2">text</div>
<div id="text3">text</div>    
<div id="text4">text</div>
<br><br>
<div id="button">Show more</div>

jQuery的：

 var count=2;
 $( "#button" ).click(function() {
 $( "#text"+count ).show();
 count++;
        });

DEMO

Answer 2

现在没有太多时间解释，为你起草了一些东西（故意为ajax-less）。

http://jsfiddle.net/J2MMc/

$(function(){
$show = 4;
$articles = $("#newsblock>.news");

$update = function()
{
    $vis = 0;
    $pos = 0;
    $articles.each(function(ind,obj)
    {
        $pos++;
        $(this).css({"display":($pos>$show)?'none':'block'});

        if ($pos<=$show) { $vis++; }
    });

    if ($vis == $articles.length)
    {
        $("#btnMore").css({"display":"none"});   
    }
};
$update();

$btnMore = $("<div />").attr({"id":"btnMore"});
$btnMore.html("Show more");
$btnMore.click(function()
{
    $show = $show + 2;
    $update();
});
$("body").append($btnMore);
});

http://jsfiddle.net/J2MMc/

<div id="newsblock">
<div class="news" data-id="1">Lorem Ipsum blah blah</div>
<div class="news" data-id="2">Lorem Ipsum blah blah</div>
<div class="news" data-id="3">Lorem Ipsum blah blah</div>
<div class="news" data-id="4">Lorem Ipsum blah blah</div>
<div class="news" data-id="5">Lorem Ipsum blah blah</div>
<div class="news" data-id="6">Lorem Ipsum blah blah</div>
<div class="news" data-id="7">Lorem Ipsum blah blah</div>
<div class="news" data-id="8">Lorem Ipsum blah blah</div>
<div class="news" data-id="9">Lorem Ipsum blah blah</div>
<div class="news" data-id="10">Lorem Ipsum blah blah</div>
</div>

http://jsfiddle.net/J2MMc/

祝你好运。

如何使用js / jquery show / hide在我的页面上显示更多按钮

2 个答案: