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做出了回答，这里采用不同的方式，使用class for active element而不是:visible伪选择器。

example on 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");
  }
});

切换多个div之间的可见性

4 个答案: