divを一度に1つずつ順番に表示するためのJqueryリンク？

Question

5桁のページがあります。それらのうちの1つだけがデフォルトで表示され、他の4つはCSSで隠されています。私はボタンをクリックして余分なdiv を1つずつ表示したいと思っています。を順番に表示します。つまり、リンクの1回目のクリックでdiv＃2が表示され、2回目のクリックでdiv＃3が追加され、3回目のクリックでdiv＃4が表示され、最後のクリックで5つのdivがすべて表示されます。

私は表示/非表示の部分は問題ありませんが、シーケンス内の次のdivを表示するにはどうすればリンクできますか？

Answer 1

DIV1、DIV2、DIV3などのIDを割り当てることでdivを数えるために、この希望を実現するための簡単な方法...

は、その後、それは単純に見えるのdivの数を追跡する問題です。ボタンのクリックイベントハンドラでは、カウントをインクリメントして、表示する次のdivのIDを生成します。

また、目に見えるdivの数が表示されるdivの総数に等しいかどうかをチェックします。

var visibleDivsCount = 1; 
var totalDivsCount = 5 


function DisplayNextDiv() 
{   
    if(visibleDivsCount < totalDivsCount) 
    { 
     visibleDivsCount += 1; 
     $("#div"+visibleDivsCount).show(); 
    } 
} 


$("#button").click(function(){ 
    DisplayNextDiv(); 
}); 

Answer 2

私の知る限りではjqueryのhide()関数は単にとにかく、noneに表示を設定しますので、あなたは常に、displayプロパティの値を取得するには、それぞれのdivの表示にアクセスすることができました。

あなたはこれらの値をチェックする機能を書くことができ - 別のポスターが、次のようにシーケンシャルIDを使用してdiv年代に名前を付けるかもしれません示唆したように：ように

<div id="div-0"></div> 
<div id="div-1"></div> 

[ビルド...あなたjQueryのセレクタループ中と表示プロパティを確認します

for (divNo = 0; divNo < numberOfDivs; divNo++) { 
    if ($("#div-" + divNo.toString()).css("display") == none) { 
     // Show this div and bail. 
     // ... 
    } 
}