每次點擊顯示更多的div

Question

我希望有一個順序列表顯示，其中最初隱藏除第一個列表以外的所有lis，並且當用戶單擊一個按鈕時，該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;
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 ，則可以使用循環，例如：

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

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

i+=step;

希望這可以幫助。

Answer 2

您可以使用:hidden與.each()循環一起使用：

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

Answer 3

您的eq（i）需要循環。

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 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();
});

小提琴