divのようなページ間の切り替え

Question

私はインクリメンタルIDを持ついくつかのdiv要素を持っています（例：div0、div1、div2（これは悪い習慣です - 私はOutlookのカレンダーのエクスポート用に動的なCSV-to-HTMLコンバータを開発しています））順方向/逆方向ボタンにリンクされたjQueryを使用して、それらの間を切り替える必要があります。次のように私は何をしようとしていることは（無意味な擬似コードで）です：

int pos = 0 
forward.onclick 
    hide ("#div"+pos) 
    pos++ 
    show ("#div"+pos) 
back.onclick 
    if pos != 0 
     hide ("#div"+pos) 
     pos-- 
     show ("#div"+pos) 

私は次のjQueryについて何を知っているので、私の質問は1です。構文は、上記の例を実装するために何だろう（私が正しい軌道にいると仮定して）、そして2.何らかの方法で上限を確認する方法がjQueryにあるので、カウンタはdivの数を超えて増加しませんか？

Answer 1

あなたは、あなたはjQueryのに持っているどのように多くのdivを知っているそれらを選択して、選択範囲の長さを取りたい場合は、次の

$('.div').length 

あなたも、ちょうど示すことのdivそれを通してサイクルにその選択を使用することができます。

var $divs = $('.div'); 
var upperLimit = $divs.length - 1; 
var index = 0; 

// on arrow click 
$($divs[index]).hide(); 
index++ (or index--, depending on the arrow) 
$($divs[index]).show(); 

Answer 2

intはJavaScriptのデータ型ではありません。 varを使用してください。宣言はvar pos = Number(0)となります。 divの数の境界を超えないようにするには、divの数で変数を宣言し、hideとshowの呼び出しの中でposの代わりにpos℅divLengthを使用します。合計divが4と仮定した場合、このようにしてdiv3を超えることはありません。 div0からdiv3まで繰り返されます。 showメソッドとhideメソッドの使用方法については、thisを参照してください。

Answer 3

Here's a demo.

var index = 0; 
$('#div' + index).show(); 
$('#next').click(function() { 
    index++; 
    $('#back').prop('disabled', false); 
    if (index === fakeData.length - 1) { 
    $('#next').prop('disabled', true); 
    } 
    $('.items').hide(); 
    $('#div' + index).show(); 
}); 
$('#back').click(function() { 
    index--; 
    $('#next').prop('disabled', false); 
    if (index === 0) { 
    $('#back').prop('disabled', true); 
    } 
    $('.items').hide(); 
    $('#div' + index).show(); 
}); 

上記のコードを使用すると、先頭またはデータのリストの末尾にあるかどうかに基づいて、次のと背中のボタンを無効にできるようになります。すべての要素を非表示にして、表示する特定の要素を表示します。