我有一组列表项,我希望使用eq()来fadeIn()和fadeOut()。如果我的代码看上去很糟糕的话,我也很难发布我的代码。
<ul id="skater_mulitivew">
<li class="first_gallery"></li>
<li class="second_gallery"></li>
<li class="third_gallery"></li>
<li class="fourth_gallery"></li>
</ul>
我的jQuery/JS:
<script>
$('.right_trigger').click(function(event) {
var i=0;
event.preventDefault();
while (i<5) {
$('#skater_mulitivew li').eq(0).fadeOut('slow');
$('#skater_mulitivew li').eq(1).fadeOut('slow');
i++;
};
});
</script>
它只运行一次,但当我重新单击.right_trigger项时,它不会再次运行。我想循环每一个列表项目在每次点击。谢谢您的意见!
发布于 2013-07-25 14:18:08
当前的守则问题
i
具有全局范围,所以下一次循环尝试迭代i
= 5时,会导致循环不迭代。将i
的声明移到匿名函数中。
$('.right_trigger').click(function(event) {
var i=0;
event.preventDefault();
while (i<5) {
$('#skater_mulitivew li').eq(0).fadeOut('slow');
$('#skater_mulitivew li').eq(1).fadeOut('slow');
i++;
});
});
电流码的优化
另外,我不知道为什么要调用fadeOut()
函数5x。您可以通过以下方式达到同样的效果:
$('.right_trigger').click(function(event) {
event.preventDefault();
//If your trying to fadeout all li use the proceeding commented code
//$('#skater_mulitivew li").fadeOut("slow");
//If your actually trying to target by index use the proceeding code
$('#skater_mulitivew li:eq(0),#skater_mulitivew li:eq(1) ').fadeOut('slow');
i++;
});
旋转木马实现
考虑到这些评论,你似乎想做一个类似旋转木马的功能。以下是实现这一目标的html、css和javascript。
<ul id="skater_mulitivew">
<li class="first_gallery">Gallery 1</li>
<li class="second_gallery">Gallery 2</li>
<li class="third_gallery">Gallery 3</li>
<li class="fourth_gallery">Gallery 4</li>
</ul>
<div class="right_trigger">Trigger</div>
CSS
#skater_mulitivew li{
display:none;
}
#skater_mulitivew li:first-child{
display: block;
}
Javascript
$('.right_trigger').click(function(event) {
var items = $("#skater_mulitivew li");
toggle(items,0);
});
function toggle(items, index){
items.eq(index).fadeOut('slow', function(){
index = (index == items.length -1) ? -1:index;
items.eq(index + 1).fadeIn('slow', function(){
toggle(items, ++index);
});
});
}
发布于 2013-07-25 14:20:23
它肯定会工作一次,因为1
0
已经淡出了
<script>
var i=0;
$('.right_trigger').click(function(event) {
event.preventDefault();
while (i<5) {
var next = i + 1;
$('#skater_mulitivew li').eq(i).fadeOut('slow');
$('#skater_mulitivew li').eq(next).fadeOut('slow');
i = i + 2;
}
});
</script>
您还应该在html <ul id="#skater_mulitivew">
中将此更正为<ul id="skater_mulitivew">
。
发布于 2013-07-25 14:19:51
是的,您的i
是全局设置的,当它再次被调用时,这种设置超出了时间条件的范围。
https://stackoverflow.com/questions/17869733
复制相似问题