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

<强> 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来表明您可以使用循环，例如：

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

Here's

每次点击都会显示一些额外的div

4 个答案: