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ベストアンサー
- 回答日時:
> 回答ありがとうございます。
> 恥ずかしながらソースがこんな感じになってます。
(以下略)
それなら、私が挙げたコードがほぼそのまま使えると思います。
アクセスする要素のクラス名を質問者さんの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>
(以下略)
って感じで。
No.1
- 回答日時:
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></ …
</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個つくって順繰りいきたかってのですが
続く・・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
スライドを最後の画像で止めたい
-
入力フォームの値をQRコードで...
-
RPA(PowerAutomate)の実装について
-
jQueryを使いformでsubmitした...
-
ダブルクリックと2回クリックの...
-
Googleマップで何か見つけたも...
-
VBA コンボボックスの値をスピ...
-
JQuery、セレクトボックスをル...
-
GASでスプレッドシートの一番上...
-
二つのbxsliderをレスポンシブ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのgetでJSPを呼び出したい
-
要素内を常に一番下を表示させたい
-
【javascript文法】 prototype...
-
ローカルでのonreadystatechang...
-
jQueryで、複数条件の絞り込み機能
-
JQueryでAjax通信をキャンセル...
-
画面移遷なしで画像アップロー...
-
jqueryでリンクを無効にしたあ...
-
jqueryについて
-
繰り返し処理のシンプルな書き方
-
ある条件の画像のみ表示を切り...
-
jQuery 並列load処理
-
アコーディオンメニューについて
-
jqueryの関数?について
-
jqueryで読み込みが終わった画...
-
jQueryでloadしたページ内でもj...
-
jqueryで特定のIDに対して
-
AJAXでのリロードに関して
-
jqueryでテキストエリア監視に...
-
ドラッグ & ドロップでのド...
おすすめ情報