jqueryについて

質問

jqueryについて
こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？

例えば
$(function(){
$("#navi01-99 a").click(function(){
$("#main01-99 img").attr("src",$(this).attr("href"));
return false;
});
みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？
用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？

$(function(){
$("#navi01 a").click(function(){
$("#main01 img").attr("src",$(this).attr("href"));
return false;
});
});
$(function(){
$("#navi02 a").click(function(){
$("#main02 img").attr("src",$(this).attr("href"));
return false;
});
});
$(function(){
$("#navi03 a").click(function(){
$("#main03 img").attr("src",$(this).attr("href"));
return false;
});
});
$(function(){
$("#navi04 a").click(function(){
$("#main04 img").attr("src",$(this).attr("href"));
return false;
});
});
$(function(){
$("#navi05 a").click(function(){
$("#main05 img").attr("src",$(this).attr("href"));
return false;
});
});

回答No.2

mtaka2 · ベストアンサー

> 回答ありがとうございます。
> 恥ずかしながらソースがこんな感じになってます。
(以下略)

それなら、私が挙げたコードがほぼそのまま使えると思います。
アクセスする要素のクラス名を質問者さんのHTML表記にあわせると、
class="navi_mainbox" のひとまとまりを処理単位として、

---ここから
$(function(){
$(".navi_mainbox").each(function(index, elem) {
$(".navi a", $(elem)).click(function(){
$(".navi_box img", $(elem)).attr("src",$(this).attr("href"));
return false;
});
});
});
---ここまで

となります。

処理内容を説明すると、
$(".navi_mainbox").each…: class=navi_mainboxなdiv要素それぞれについて以下の処理を行います。以下、対象のdiv要素は$(elem)でアクセスできる。
$(".navi a", $(elem)).click…: $(elem)要素の下の .navi a 要素に対し、click event を設定
$(".navi_box img", $(elem)).attr…: $(elem)要素の下の .navi_box img 要素に対し、hrefを書き換え

という流れになります。

そもそも、他に用途がないなら、idを個別に割り振る必要すらありません。
jQuery からはclassを通したアクセスで処理できます。

あと、誤動作を防ぐためには、処理対象の img や a 要素にclassを割り振った方がいいかと思います。

$(function(){
$(".navi_mainbox").each(function(index, elem) {
$("a.navi_source", $(elem)).click(function(){
$("img.navi_target", $(elem)).attr("src",$(this).attr("href"));
return false;
});
});
});
(略)
<img class="navi_target" src="job/052/00000.jpg" alt="サンプルページ01" width="310" height="220" /></div>
(略)
<li class="navi_img"><a class="navi_source" href="job/052/00000.jpg"><img src="job/052/aaaa.jpg" alt="サンプルページ02" width="100" height="70" /></a></li>
(以下略)
って感じで。

お礼

mtaka2さん

できました！
親切で丁寧に対応していただき、ありがとうございます。

回答No.1

mtaka2

navi01～navi99のidを割り振っている要素に、全て同じclassを割り当てておいて、それを元に処理するのが楽だと思います。

---ここから
$(function(){
$(".navi").each(function(index, elem) {
$("a", $(elem)).click(function(){
$("img", $(elem)).attr("src",$(this).attr("href"));
return false;
});
});
});
(略)
<div class="navi" id="navi01"><img src=""><a href="test01.jpg">test01.jpg</a></div>
<div class="navi" id="navi02"><img src=""><a href="test02.jpg">test02.jpg</a></div>
<div class="navi" id="navi03"><img src=""><a href="test03.jpg">test03.jpg</a></div>
<div class="navi" id="navi04"><img src=""><a href="test04.jpg">test04.jpg</a></div>
<div class="navi" id="navi05"><img src=""><a href="test05.jpg">test05.jpg</a></div>
(以下略)
---ここまで

といった感じ。

補足

回答ありがとうございます。
恥ずかしながらソースがこんな感じになってます。

実績01-----------------------------------------------------------------------------------------

<div class="navi_mainbox">
<p class="navi_h1_box"> ○○○株式会社 様</p>
<div class="navi_box">
<div id="container">
<div id="main">
<img src="job/052/00000.jpg" alt="サンプルページ01" width="310" height="220" /></div>
</div>

<div id="navi">
<ul>
<li><a href="job/052/00000.jpg"><img src="job/052/aaaa.jpg" alt="サンプルページ01" width="100" height="70" /></a></li>
<li class="navi_img"><a href="job/052/00000.jpg"><img src="job/052/aaaa.jpg" alt="サンプルページ02" width="100" height="70" /></a></li>
<li class="navi_img"><a href="job/052/00000.jpg"><img src="job/052/aaaaa.jpg" alt="サンプルページ03" width="100" height="70" /></a></li>
</ul>
</div>
</div>
<div class="navi_textbox">
<p class="img_gaiyu"><img src="img/img_gaiyu.gif" width="322" height="24" /></p>
<table width="322" height="268" cellpadding="0" cellspacing="0" class="table_09 table_09_posi">
<tr>
<td>サイト公開日</td>
<td>2010年4月</td>
</tr>
<tr>
<td>Webサイト制作目的</td>
<td>新規構築</td>
</tr>
<tr>
<td>弊社の対応範囲</td>
<td>ディレクション、デザイン<br />
コーディング、保守・運営管理</td>
</tr>
<tr>
<td>Webサイトのページ数</td>
<td>9ページ（納品時）</td>
</tr>
<tr>
<td>主な機能</td>
<td>FLASH</td>
</tr>
<tr>
<td colspan="2"><span class="navi_url"><img src="img/img_hidari.gif" width="9" height="9" class="img_hidari" /><a href="http://www.aaaaa.jp/">http://www.aaaaa.jp/</a></span></td>
</tr>
</table>
</div>
</div>
----------------------------------------------------------------------------------------------

こんな感じのが100実績あります。
<div id="main">が大きな画像で上に1つ
<div id="navi">が小さな画像が下に3つ
下の3つの画像をクリックすると上の<div id="main">に表示

ひとつの実績にたいして

$(function(){
$("#navi a").click(function(){
$("#main img").attr("src",$(this).attr("href"));
return false;
});
});

ふたつめは

$(function(){
$("#navi02 a").click(function(){
$("#main02 img").attr("src",$(this).attr("href"));
return false;
});
});

と100個あったら100個必要なのでしょうか？
1ページに8実績載せてpaginationでページ送りをしています。
8個つくって順繰りいきたかってのですが

続く・・・・。