點擊錨時顯示更多Divs？

Question

我什至不知道這將被稱爲所以我不知道該找什麼，但我想要做的是有一個固定的按鈕，將點擊時加載更多的div。

我有15個「盒子」類的div，我只想顯示3個「盒子」類的div。如何顯示3個div直到顯示所有15個div？

<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 

<a href="#" title="">Load 3 More boxes</a> 

Answer 1

很可能需要添加一個id或class到你的錨，從而將其與同一頁面上的其他錨區分開來。畢竟，我們不希望所有的人都加入新的元素div：

// Handle the click event of our anchor 
$("a.addMore").on("click", function(e){ 
    // Show the next three hidden .box elements immediately 
    $(".box:hidden:lt(3)").show(0, function(){ 
    // If there are no more hidden elements, remove our link 
    !$(".box:hidden").length && $(e.target).remove(); 
    }); 
// Trigger a click to load in our first three 
}).trigger("click"); 

演示：http://jsbin.com/amituh/5/edit

Answer 2

看到這個小提琴（更新，刪除錨點）：http://jsfiddle.net/MaqYL/5/

最初：

$(".box:gt(2)").hide(); 

點擊主播：

$("a").click(function(){ 
    var hiddens = $(".box:hidden"); 
    hiddens.slice(0,3).show(); 
    if(hiddens.length <= 3) 
    { 
     $(this).remove(); 
    }  
}); 

爲了防止其他錨點這樣做，最好給你的錨定一個id。

Answer 3

<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div id="garage" style="display:none"> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
</div> 

<a href="javascript:next3();" title="">Load 3 More boxes</a> 

function next3() { 
    var box = document.getElementById("garage"); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
}