Q&A
> oskbtさん
回答ありがとうございます、ご教授いただいた方法で希望通りの動きが実現できました！
なるほど、parentsで要素を指定して、findを使って目的の要素を探すんですね。
勉強になりました m(_ _)m
サムネイルをクリックするとメイン画像(大きな画像)が切り替わるギャラリーを作りました。
<div class="item"> <div class="show-img"><img src="large01.jpg"></div> <ul class="thumb-list"> <li><a href="large01.jpg"><img src="thumb01.jpg"></a></li> <li><a href="large02.jpg"><img src="thumb02.jpg"></a></li> <li><a href="large03.jpg"><img src="thumb03.jpg"></a></li> </ul> </div> <script> $(function(){ $(".thumb-list li a").click(function(){ var thumbSrc = $(this).attr("href") $('.show-img img').fadeTo("slow", 0.1 ,function() { $(this).attr("src",thumbSrc).fadeTo("normal",1); }); return false; }); }); </script>
このギャラリーを同じページ内に２つ配置してみたのですが↓
<div class="item"> <div class="show-img"><img src="large01.jpg"></div> <ul class="thumb-list"> <li><a href="large01.jpg"><img src="thumb01.jpg"></a></li> <li><a href="large02.jpg"><img src="thumb02.jpg"></a></li> <li><a href="large03.jpg"><img src="thumb03.jpg"></a></li> </ul> </div> <div class="item"> <div class="show-img"><img src="large04.jpg"></div> <ul class="thumb-list"> <li><a href="large04.jpg"><img src="thumb04.jpg"></a></li> <li><a href="large05.jpg"><img src="thumb05.jpg"></a></li> <li><a href="large06.jpg"><img src="thumb06.jpg"></a></li> </ul> </div> <script> $(function(){ $(".thumb-list li a").click(function(){ var thumbSrc = $(this).attr("href") $('.show-img img').fadeTo("slow", 0.1 ,function() { $(this).attr("src",thumbSrc).fadeTo("normal",1); }); return false; }); }); </script>
そうするとサムネイルクリック時に両方のギャラリーのメイン画像が切り替わってしまって困っています。
IDとか使わずに、このままのコードでクリックしたほうのギャラリーのメイン画像のみにsrcを反映させるにはどうすればいいのでしょうか？
どなたか教えてください。
###試したこと
・「$('.show-img img').fadeTo～」を「$(this).parents().children('show-img img')」とかにしたけどだめだった。。
回答2件
0
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="wrap"> 9 10 <div class="item"> 11 <div class="show-img"> 12 <img src="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル1" /> 13 </div> 14 <ul class="thumb-list"> 15 <li> 16 <img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル1" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル1" /> 17 </li> 18 <li> 19 <img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル2" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル2" /> 20 </li> 21 <li> 22 <img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル3" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル3" /> 23 </li> 24 </ul> 25 </div> 26 27 <div class="item"> 28 <div class="show-img"> 29 <img src="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル4" /> 30 </div> 31 <ul class="thumb-list"> 32 <li><img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル4" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル4" /></li> 33 <li><img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル5" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル5" /></li> 34 <li><img src="http://dummyimage.com/120x80/cccccc/000000&text=サムネイル6" data-bigimage="http://dummyimage.com/360x240/cccccc/000000&text=オリジナル6" /></li> 35 </ul> 36 </div> 37 38 </div> 39 <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> 40 <script type="text/javascript"> 41 $(function () { 42 $('.thumb-list > li > img').on('click', function () { 43 var url = $(this).attr('data-bigimage'); 44 var item = $(this).parents('.item'); 45 item.find('.show-img > img').prop('src', url); 46 }); 47 }); 48 </script> 49 </body> 50</html>
投稿2016/05/29 08:58
退会済みユーザー
総合スコア0
0
ベストアンサー
「$('.show-img img').fadeTo～」を「$(this).parents(".item").find('show-img img').fadesTo～」にすればいいです。
children()は一つ下の子要素、find()は子孫要素全部が対象です。
投稿2016/05/29 08:42
総合スコア1895
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/29 09:03