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

ご参考までに。。。