divで1つずつdivを表示しています

私は同じIDの10個のdivを持っていますが、そのうちの9個がページ上に隠されていて、1つしか表示されていません。 1とその直後の次を示しというように、問題はどのように私はdivで1つずつdivを表示しています

がおかげで

出典

2011-09-11 Henry

同じIDで10個のdivを持つことはできません。あなたは同じクラスを意味しますか？ –

すべて同じIDを持っていますか？なぜ10のdivsのために同じIDを使うべきですか？なぜそれのためのクラスを使用し、フェードアウトのためにIDを使用しないでください –

まずあなたが同じIDを使用してはならないいくつかの助けを必要とすることを実現することができますので、それらすべてが同じIDを持っているということですあなたのページの複数の要素に対して

代わりにクラスに参加してください。 <div class="myclass">。

次のボタンを使用している場合、できることの1つは、クラスの要素の配列内のどこにあるのかを数え続け、そのクラスのすべての要素を非表示にして、あなたはにいます。

私はあなたのための簡単なデモを取り上げます。

更新

ここでは、のために非常に基本的なデモの例です：http://jsfiddle.net/SENqj/

var item0 = $(".myItems").first().show(); 
var counter = 1; 

$("#toggler").click(function(){ 
    $(".myItems").hide(); 
    var currentItem = $('.myItems').get(counter); 
    $(currentItem).show(); 
    counter++; 
});

アップデート2：

アイテムの循環を確保するためにクリックするだけの投手で、この1行を含めます上記：

counter = (counter < $(".myItems").length)? counter : 0;

出典

2011-09-11 11:04:24

ok thanks jamie – Henry

これは、最後のdivに入ってから最初の要素へのサイクリングを処理しません。 –

ありがとう@Sahil。それはサイクリングのための簡単な追加です。 –

ここでは、カウンタを使用しない別の方法があります。これは最後のサイクルの後の最初のdivへのサイクリングも正しく処理します。

Working Demo

$('#next').click(function() { 
    var $shownDiv = $('div.content').not('.hidden'); 
    if ($shownDiv.next('.hidden').length === 0) { 
     $('div.hidden:first').removeClass('hidden').show(); 
    } else { 
     $shownDiv.next('.hidden').removeClass('hidden').show(); 
    } 
    $shownDiv.addClass('hidden').hide(); 
});

出典

2011-09-11 11:32:48

私は与えられた答えがより良いソリューションであればわからないんだけど、私はそう思います。私はこの最後の分を費やしました。

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 

     <script type="text/javascript"> 
     function next_page() { 

      // make new page part active 
      $(".active_part").next(".hidden_page_part").addClass("active_part").removeClass("hidden_page_part");; 

      // disable first page part (make it non-active) 
      $(".active_part").first().removeClass("active_part").addClass("hidden_page_part"); 
     } 
     </script> 

     <style type="text/css"> 
     .hidden_page_part { 
      display: none; 
      visibilty: hidden; 
     } 
     </style> 
    </head> 
    <body> 
     <div> 
      <div class="active_part">Show me 1st</div> 
      <div class="hidden_page_part">Show me 2nd</div> 
      <div class="hidden_page_part">Show me 3rd</div> 
      <div class="hidden_page_part">Show me 4th</div> 
     </div> 

     <input type="button" value="Next" onclick="next_page();" /> 
    </body> 
</html>

出典

2011-09-11 11:36:31 Smamatti

divで1つずつdivを表示しています

答えて

関連する問題