Question

我有一个包含多个<div>标签的<article>。现在我想添加一个按钮，每次点击都会显示更多条目。让我说我默认显示5，然后我点击显示更多按钮，然后我得到10个条目，然后我再次点击，我得到15个条目。

HTML结构非常简单：

<div>
  <article> data here </article>
  <article> data here </article>
  <article> data here </article>
</div>
<button>show more</button>

提前致谢...

Answer 1

尝试小提琴

$("article:gt(4)").hide();
var count =  $("article").length;

var i = 5;
$("button").on("click" , function() {
    i = i + 5;    
    $("article:lt(" + i + ")").show();
    if(i > count){
        $("button").hide();
    }
});

DEMO

Answer 2

检查fiddle此处：

$(document).ready(function() {


    $("#show").click(function(){
        var article_no=$("#container > article").length;
        for(i =article_no+1; i<=article_no+5; i++)
        {
            if (i>30)
                break;

            $("#container").append("<article> data here"+(i)+" </article>");
        }

    }); 
});

希望这有帮助。

注意：这将显示最多30条记录。您需要根据记录数修改条件。

如何在按钮点击上添加更多元素

2 个答案: