![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
jqueryについて(v 1.4.2)
<script type="text/javascript">
$(function() {
$("h1").append('<em></em>')
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage").attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
</script>
【html↓】
<div>
<h1>ギャラリータイトル</h1>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
<a href="images/img3-lg.jpg" title="タイトル 3">
<img src="images/img3-thumb.jpg" />
</a>
<a href="images/img4-lg.jpg" title="タイトル 4">
<img src="images/img4-thumb.jpg" />
</a>
<a href="images/img5-lg.jpg" title="タイトル 5">
<img src="images/img5-thumb.jpg" />
</a>
<a href="images/img6-lg.jpg" title="タイトル 6">
<img src="images/img6-thumb.jpg" />
</a>
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>
</div>
上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを
適用したいと思っています。
.each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが
反応してしまいます。
.click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。
個々のdivに適用するにはどうすればいいのでしょうか。
.each()を使う事自体が間違っているのでしょうか。
初心者なので分かりやすく教えていただければ幸いです。
No.2ベストアンサー
- 回答日時:
すみません、HTMLの構造をちょっと見間違えてました。
---
<div class="thumbs">
<h1>ギャラリータイトル</h1>
<p>
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
(略)
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>
</div>
---
こんな感じにしてください。
要は、「サムネイル画像のa要素」と「拡大表示のimg要素」の両方が入った
「同じ構造のdiv」の1組をセレクタで指定できる名前付けが必要になるということです。
引き続きの回答ありがとうございます。
教えていただいたとおり、divにクラスthumbsを指定することによって
各divの.largeImageが反応し、問題が解決できました。
divにクラス指定するのは全然気づきませんでした・・・。
おっしゃられた意味も全て理解できましたし、またひとつ勉強になったので
質問して良かったです。
ありがとうございました。
No.1
- 回答日時:
実際に試してませんが、たぶん
---
$(function(){
$(".thumbs").each(function(index, elem) {
$("a",$(elem)).click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage",$(elem)).attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
});
});
---
こんなコードでいけると思います。
$()は、第二引数を指定することで、その指定要素の下から検索するようになります。
$(".thumbs").each で、クラスthumbsの要素について処理してますが、その中では、
$("a",$(elem)) は「elem=その時eachで処理対象にしているthumbsクラス要素」の下の a タグ要素を検索
$(".largeImage",$(elem))は、「elem=その時eachで処理対象にしているthumbsクラス要素」の下の largeImage クラス要素を検索
することで、cilck対象要素と書き換え対象要素を、同じ thumbs クラス要素配下に限定できます。
早速の回答ありがとうございます。
解りやすく教えていただき勉強になります。
教えていただいたとおり試してみましたが、うまくいかず
.largeImageが無反応になりました。
また、aをクリックすると画像ページに飛んでしまうのでreturn falseを
追加しました。
試してみたコード↓
$(function(){
$(".thumbs").each(function(index, elem) {
$("a",$(elem)).click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage",$(elem)).attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
});
自分なりに試行錯誤してみましたが、まだ解決策が出ません。
引き続きよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MFCを使って、ひとつのkey(CStr...
-
IE等のブラウザにテキスト入...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
Javascript_submit()完了後に処...
-
エクセルのシート上に別のシー...
-
ウインドウを毎回同じ位置、大...
-
リストビューをスクロールさせ...
-
スクリプトって、何ですか?ど...
-
一定時間おきにアラームやポッ...
-
Excelでワードアートや図を常に...
-
VBAで任意のウインドウのサイズ...
-
「Cancel = True」とはどういう...
-
Outlookでこのような表示がされ...
-
ExcelVBAで他のアプリをスクロ...
-
PDFを(htmlのように)無限に縦...
-
Youtubeが勝手に右下に勝手に小...
-
パソコンを起動させたら文字の...
-
エクセルVBAでフォームのListbo...
-
Excelのワークシートが全部表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MFCを使って、ひとつのkey(CStr...
-
PL/Iについて、教えてください。
-
(VBS) テキストファイル読込で...
-
VC++のデバッガでvectorの要素...
-
bxSliderで動画をスライドごと...
-
【VBA/HTML】特定のタグ要素に...
-
no confilict で value値が取れな
-
WebサイトのHTMLオブジェクトの...
-
ICPCの過去問
-
エクセルでタグの内容が取得で...
-
フローティングのやり方について
-
フォームで入力時自動で次の項...
-
エクセルの散布図で選択してい...
-
Ajax.Updaterで読み込んだ先の...
-
JavaScriptでクリップボードの...
-
lispについて質問です
-
フォームをリサイズ後に動作を行う
-
ページ全体をスクロールするAja...
-
jqueryでtable内容の置き換え
-
VBA スクレイピング
おすすめ情報