使用 eq() 淡入/淡出列表项答案

【问题标题】：using eq() to fadeIn/Out list items使用 eq() 淡入/淡出列表项
【发布时间】：2013-07-26 06:57:46
【问题描述】：

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

【问题讨论】：

您可以在任何地方使用 i，但在 while 之前将其设置为 0
为什么是 var i 和循环？连续淡出 5 次与仅淡出一次相同。你想达到什么目的？
简短回答：是的。 i 的定义应该在while 之前。
是的，您将 var 放在很远的地方。但是您也可以在单击时将 i 重置为 0。
另外，还有一个语法错误，关闭while块后多了一个)。

标签： javascript jquery

【解决方案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++;
 });

轮播实现

鉴于您想要制作类似轮播的功能的 cmets。这是实现这一目标的 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/

【讨论】：

更好的是，删除i 和while。我看不出有什么好的理由保留它们。
@bfavaretto 谢谢，我明白了。
@KevinBowersox 所以在这种情况下我没有使用 i 作为变量，而是 i 作为列表项的索引？您的示例是否允许它淡入淡出，直到到达最后一个列表项？
@SkipZepeda 对你想做什么有点困惑？因此，当他们单击触发器时，您想要每隔一个 li 淡出并每隔一个 li 淡入？或者你想一次显示一个，当点击发生时隐藏当前并淡入下一个？
@KevinBowersox 我想淡出第一个列表，用第二个替换它，然后重复此操作，直到我到达最后一个列表，这应该淡出和淡入第一个索引列表。

【解决方案2】：

肯定会工作一次，因为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">

FIDDLE

【讨论】：

现在因为我希望“下一个”项目淡入，将方法更改为 .fadeIn() 应该可以工作吗？这是否只适用于 i 和 i+ 1 索引项目，或者这会工作对于 eq(2)、eq(3) 等？
这是一个循环，在第一次迭代中它会淡出0,1 在第二次迭代中它会淡出2,3

【解决方案3】：

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

【讨论】：

所以因为我需要检查 i
因为 i 是在你的函数之外声明的，它永远不会被重置。因此，在注册第一个单击事件后，您的 while 循环会将 i 增加到 5，然后每次后续单击它仍将是 5。您需要将 i 声明移动到函数体内，以便它在每个函数上创建一个新 i点击，我认为这就是您所说的。

【解决方案4】：

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

<ul id="#skater_mulitivew">

应该是

<ul id="skater_mulitivew">

注意无关的哈希。

       });
 });

应该是

       }
 });

注意多余的括号和分号。

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

【讨论】：

在您的示例中，} 封装了 while (i