[英]Show a number of additional divs on every click
I want to have a sequential list display, where initially all the lis except the first one are hidden, and when the user clicks a button, the lis appear by groups of 3. Eventually I would like to hide the button when the list gets to the end. 我希望有一个顺序列表显示,其中最初隐藏除第一个列表以外的所有lis,并且当用户单击一个按钮时,该lis按3组显示。最终,我想在列表到达时隐藏该按钮。结束。
The code is something like this, but it shows only one per click, every third - but I want to show also the in-between elements until the third 代码是这样的,但每次单击仅显示一次,每三分之一显示一次,但是我也想显示中间的元素,直到第三次
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(); }
});
Probably the .eq(i)
is not the function I need, but couldn't find the correct one... .eq(i)
可能不是我需要的功能,但找不到正确的功能...
If you have just three you could use : 如果只有三个,则可以使用:
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(); }
});
If you have several li
s to show you could use a loop, eg : 如果要显示几个
li
,则可以使用循环,例如:
var step = 10; //Define it outside of the event
for(var j=0;j<step;j++){
li.eq(i+j).fadeIn();
}
i+=step;
Hope this helps. 希望这可以帮助。
You can use :hidden
with use of .each()
loop: 您可以使用
:hidden
与.each()
循环一起使用:
jQuery("#allevents").on('click', function(e){
e.preventDefault();
jQuery(".event-holder:hidden").each(function(i){
if(i <= 2){
jQuery(this).fadeIn();
}
});
});
You eq(i) needs to be looped. 您的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;
});
An alternative approach would be to buffer all the items, and keep adding them until empty: 另一种方法是缓冲所有项目,并不断添加直到空:
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.