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>などのボックス要素を対象にすることも可能です。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでの連番要素を制御する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR