Javascript 每次单击时显示多个附加div

我想有一个连续的列表显示，其中最初所有的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）

不是我需要的函数，但找不到正确的函数…

你的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;
});

jQuery（“.event holder:gt（0）”）.hide（）；
var i=0；
var numbofelem=jQuery（“.event holder”）.length；
jQuery（#allevents”）.on（'click'，函数（e）{
e、 预防默认值（）；
//i+=3；
//jQuery（“.event holder”）.eq（i）.fadeIn（）；//只显示第三个元素。循环此
//像这样的
对于（var j=i；j，需要循环等式（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;
});

jQuery（“.event holder:gt（0）”）.hide（）；
var i=0；
var numbofelem=jQuery（“.event holder”）.length；
jQuery（#allevents”）.on（'click'，函数（e）{
e、 预防默认值（）；
//i+=3；
//jQuery（“.event holder”）.eq（i）.fadeIn（）；//只显示第三个元素。循环此
//像这样的
对于（var j=i；j

如果您只有三个，您可以使用：

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;

var step=10；//在事件外部定义它
对于（var j=0；j

如果您只有三个，您可以使用：

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;

var step=10；//在事件外部定义它
对于（var j=0；j您可以使用
：hidden
和
。each（）
循环：

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

jQuery（#allevents”）.on（'click'，函数（e）{
e、 预防默认值（）；
jQuery（“.event holder:hidden”）。每个（函数（i）{
如果（i您可以使用
：hidden
和
。each（）
循环：

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

jQuery（#allevents”）.on（'click'，函数（e）{
e、 预防默认值（）；
jQuery（“.event holder:hidden”）。每个（函数（i）{
如果（i另一种方法是缓冲所有项目，并不断添加它们直到为空：

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

另一种方法是缓冲所有项目，并不断添加它们，直到它们为空：

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

也共享HTML..可能类似于for（var j=i；jAlso）的东西共享HTML..可能类似于for（var j=i；jThanks）的东西它工作得很好！我只需稍微调整一下它，for循环中的vars出现了一个错误，而且我还需要从1开始（因为0被全部显示）。所以它是：jQuery（.event holder:gt（0）”。hide（）var i=1；var numbofelem=jQuery（“.event holder”）.length；jQuery（#allevents”）.on（'click'，function（e）{e.preventDefault（）；for（var j=i；jOops，对不起！！刚刚发布了一条消息。）谢谢它工作得很好！我只需稍微调整一下，for循环中的vars有一个错误，而且我还需要从1开始（因为0显示得很清楚）就是这样：jQuery（“.event holder:gt（0）”）.hide（）；var i=1；var numbofelem=jQuery（.event holder”）.length；jQuery（#allevents”）.on（'click'，function（e）{e.preventDefault（）；for（var j=i；jOops，对不起！！刚刚发布了！）