在多个 div 之间切换可见性答案

【问题标题】：Toggle visibility between multiple divs在多个 div 之间切换可见性
【发布时间】：2012-06-21 21:10:13
【问题描述】：

我试图找到最简单的 JS 解决方案，最好是 jQuery，以完成以下任务：我有许多 div，它们都具有相同的类，我想简单地切换每个的可见性，一次一个。

<a href="#" id="toggle-trigger">Toggle Div Visibility</a>    
<div class="slide" id="slide-one"></div>
<div class="slide" id="slide-two"></div>
<div class="slide" id="slide-three"></div>
<div class="slide" id="slide-four"></div>
<div class="slide" id="slide-five"></div>

默认情况下，第一个 div 始终通过 CSS 可见。

.slide{
display:none;
}
#slide-one{
display:block;
}

除了在两个元素之间切换，我找不到任何东西，而不是多个项目。如果我能在别处找到答案，请告诉我。谢谢

【问题讨论】：

你能解释一下你期望看到的行为吗？

标签： javascript jquery

【解决方案1】：

这样的？

  $('#toggle-trigger').click(function()
  {
    var $Current = $('.slide:visible');
    var $Slides = $('.slide');
    var $Next = $Current.next();
    if ($Next.length == 0) $Next = $Slides.first();
    $Slides.hide();
    $Next.show();
  });

我为它做了一个 JSFiddle：http://jsfiddle.net/uxqBx/

【讨论】：

我在吹毛求疵，但为什么要在变量名中添加美元符号？
我不同意这里，因为你的幻灯片必须是连续的才能工作。你应该在你的 next() 中添加一个选择器
循环重启时只有我一个空白吗？

【解决方案2】：

即使 Wivlaro 给出了答案，这里也有不同的方法，使用类作为活动元素而不是 :visible 伪选择器。

example on jsfiddle

【讨论】：

是的，我确实更喜欢这个版本。谢谢！

【解决方案3】：

抱歉，出了点问题，我发晚了。 - http://jsfiddle.net/ZEBza/

$("#toggle-trigger").click(function() {
    var opened="";
    $(".slide").each(function(i, el) {
      console.log(opened);
      var pass = true;
      if(opened!="")
      {
         $(el).css("display", "block");
         opened = "";
         pass = false;
      }
      if($(el).css("display")=="block" && pass)
      {
         opened = $(el).attr("id");
         $(el).css("display", "none");
      }
    });
  if(opened!="")
  {
      $(".slide:first").css("display", "block");
  }
});

【讨论】：

【解决方案4】：

试试：

$('.slide').each(function(){
    $(this).show().prev().hide();
});

或者如果你想计时：

$('.slide').each(function(i){
    var elt = this;
    setTimeout(function(){$(elt).show().prev().hide()},i*1000);
});

错误答案

现在以幻灯片形式显示：

var current;
$(function(){
     current = $('.slide').first();
     SetInterval(function(){
         var next = $(current).next('.slide');
         if(next.length == 0)
                 current = $('.slide').first();
         $(current).hide();
         $(next).show();
     },1000);

编辑：添加了切换，我以为您希望 div 一个接一个地显示，但保持可见性。现在它应该切换了。

【讨论】：

您能否在第一个代码中添加一个延迟，使其与第二个代码相似。