jQueryでID名など連番になっている要素を制御するSCRIPTが
なんとなく出来たのでメモ書き程度に紹介してみます。
ページ内にリンク要素が複数あり、
そのリンクと連携する形での要素(BOX要素や画像など)を
表示/非表示制御する方法。
始めにHTMLソースから。
<div id="connect"> <a href="javascript:void(0);">≫PHOTO【1】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【2】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【3】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【4】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【5】 SHOW</a> </div><!--/#connect--> <div id="showimg"> <img src="img/photo01.jpg" width="250" height="188" alt="" id="show1" /> <img src="img/photo02.jpg" width="250" height="188" alt="" id="show2" /> <img src="img/photo03.jpg" width="250" height="188" alt="" id="show3" /> <img src="img/photo04.jpg" width="250" height="188" alt="" id="show4" /> <img src="img/photo05.jpg" width="250" height="188" alt="" id="show5" /> </div><!--/#showimg-->
こんな感じにソースが構成されていて、
——————————————————————————–
・「≫PHOTO【1】 SHOW」にマウスオーバーで「img/photo01.jpg(id=”show1″)」を表示
・「≫PHOTO【2】 SHOW」にマウスオーバーで「img/photo02.jpg(id=”show2″)」を表示
・「≫PHOTO【3】 SHOW」にマウスオーバーで「img/photo03.jpg(id=”show3″)」を表示
・「≫PHOTO【4】 SHOW」にマウスオーバーで「img/photo04.jpg(id=”show4″)」を表示
・「≫PHOTO【5】 SHOW」にマウスオーバーで「img/photo05.jpg(id=”show5″)」を表示
——————————————————————————–
といったアクションを要する場合。
※クリックアクションでの制御も可能ですが今回はマウスオーバーで。
表示/非表示を切り替える要素(今回はIMG画像)はCSSで「display:none」をつけて
デフォルトでは非表示にしておきます。
#showimg img { display: none; }
そして、SCRIPTの記述はこんな感じに。(もちろんjQueryファイルは別途必要)
<script type="text/javascript"> $(function(){ $("#connect a").hover(function(){ var connectCont = $("#connect a").index(this); var showCont = connectCont+1; $('img#show'+(showCont)).css({display:'block'}) },function(){ var connectCont = $("#connect a").index(this); var showCont = connectCont+1; $('img#show'+(showCont)).css({display:'none'}); }); }); </script>
まず「var connectCont」でjQueryのAPI「index」を使って
リンクの数をカウントして連番を取得します。(<a>タグの上から順に番号を取得)
「index」での連番の取得は最初が「0」になるので、
「var showCont」で「var connectCont」に対して「+1」をつけます。
そして、マウスオーバーした際に「index」で取得した自分のリンク番号を
「$(‘img#show’+(showCont))」といったようにID名の後ろに付け加えることで
連携させ、CSSのdisplayを使って表示/非表示を切り替えます。
これらを実際に動作させると以下のような感じに。
1ページ内に表示/非表示を切り替える要素が数多くあった場合には
連番制御をすることでSCRIPTもシンプルな形で構成できると思います。
画像の表示/非表示のみでなく、<div>などのボックス要素を対象にすることも可能です。
ご参考までに。。。