0

私は、次のことを達成するために、最も単純なJSソリューション、できればjQueryを見つけようとしています。すべて同じクラスのdivがいくつかあり、それぞれの表示を一度に1つずつ切り替えるだけです。 

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

複数のアイテムではなく、2つの要素を切り替える以外に何も見つかりませんでした。他の場所で答えが見つかるかどうか教えてください。ありがとう

4

4 に答える 4

5

このようなもの？

  ​$(​'#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/

于 2012-06-21T12:34:45.577 に答える
1

Wivlaroが答えたとしても、これは別の方法で、:visible疑似セレクターの代わりにアクティブな要素にクラスを使用します。

jsfiddleの例

于 2012-06-21T12:51:46.127 に答える
0

試す：

$('.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を次々に表示したいが、可視性は維持したいと思いました。これでトグルするはずです。

于 2012-06-21T12:29:27.273 に答える
0

申し訳ありませんが、問題が発生しました。投稿が遅くなりました。-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");
  }
});
于 2012-06-21T12:29:50.597 に答える