javascript - 在多个 div 之间切换可见性

Question

我试图找到最简单的 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;
}

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

Answer 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/

Answer 2

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

jsfiddle 上的示例

Answer 3

尝试：

$('.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 一个接一个地显示，但保持可见性。现在它应该切换。

Answer 4

抱歉，出了点问题，我发晚了。- 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");
  }
});