javascript - 每次点击时显示一些额外的 div

Question

我想要一个顺序列表显示，最初除了第一个之外的所有列表都是隐藏的，当用户单击一个按钮时，列表以 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

您可以使用 :hidden 和 .each() 循环:

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