0

我有一组列表项，我想使用 eq() 来淡入（）和淡出（）。如果我的代码看起来很糟糕，我也很难发布非常抱歉！

<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 项目时不再运行。我想在每次点击时循环浏览每个列表项。感谢您的任何意见！

4

4 回答 4

1

当前的代码问题

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。

HTML

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

工作示例：http: //jsfiddle.net/njxnN/1/

于 2013-07-25T22:18:08.167 回答
1

肯定会工作一次，因为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-25T22:20:23.327 回答
0

是的，你i是全局设置的，当它再次被调用时，这超出了你的 while 条件范围。

于 2013-07-25T22:19:51.173 回答
0

我认为你的脚本没有做你认为应该用 while 循环做的事情，但你的主要问题实际上是语法错误。

<ul id="#skater_mulitivew">

应该

<ul id="skater_mulitivew">

注意无关的哈希。

       });
 });

应该

       }
 });

注意多余的括号和分号。

修复这两个错误将导致前两个li项目在单击时消失。

于 2013-07-25T22:27:54.600 回答