在每次點擊時顯示多個額外的div

Question

我想要有一個順序列表顯示，其中最初除第一個以外的所有lis都被隱藏，並且當用戶單擊一個按鈕時，會以3個組的形式出現。最終我想在列表結束時隱藏按鈕。

的代碼是這樣的，但它只能說明每點擊一個，每一個第三 - 但我想也顯示在中間的元素，直到第三

jQuery(".event-holder:gt(0)").hide(); 
var i = 0; 
var numbofelem = jQuery(".event-holder").length; 
jQuery("#allevents").on('click', function(e){ 
    e.preventDefault(); 
    i+=3; 
    jQuery(".event-holder").eq(i).fadeIn(); 
    if (i == numbofelem) { jQuery(this).hide(); } 
}); 

也許.eq(i)不是功能我需要，但無法找到正確的一個...

Answer 1

您需要循環。

jQuery(".event-holder:gt(0)").hide(); 
var i = 0; 
var numbofelem = jQuery(".event-holder").length; 
jQuery("#allevents").on('click', function(e){ 
    e.preventDefault(); 
    //i+=3; 
    //jQuery(".event-holder").eq(i).fadeIn();//You are showing only the third element. Loop this 
    //Something like this 
    for(var j=i;j<i+3;j++){ 
     jQuery(".event-holder").eq(i).fadeIn(); 
     if (i == numbofelem) { jQuery(this).hide(); } 
    } 
    i = j; 
}); 

Answer 2

Working fiddle

如果你有隻有三個，你可以使用：

jQuery(".event-holder:gt(0)").hide(); 

var i = 0; 
var numbofelem = jQuery(".event-holder").length; 
var li = jQuery(".event-holder"); 

jQuery("#allevents").on('click', function(e){ 
    e.preventDefault(); 

    li.eq(i+1).fadeIn(); 
    li.eq(i+2).fadeIn(); 
    li.eq(i+3).fadeIn(); 

    i+=3; 

    if (i == numbofelem) { jQuery(this).hide(); } 
}); 

如果你有幾個li s到展示，你可以使用一個循環，例如：

var step = 10; //Define it outside of the event 

for(var j=0;j<step;j++){ 
    li.eq(i+j).fadeIn(); 
} 

i+=step; 

希望這會有所幫助。

Answer 3

您可以使用:hidden利用.each()循環：

jQuery("#allevents").on('click', function(e){ 
    e.preventDefault(); 
    jQuery(".event-holder:hidden").each(function(i){ 
     if(i <= 2){ 
     jQuery(this).fadeIn(); 
     } 
    }); 
}); 

Answer 4

另一種方法是將緩存中的所有項目，並不斷增加，直到空：

var holders = $('.event-holder').hide(); 

$("#allevents").click(function(e){ 
    e.preventDefault(); 
    holders = holders.not(holders.slice(0, 3).fadeIn()); 
    if(holders.length === 0) $(this).hide(); 
}); 

Fiddle