jQueryに関するアドバイスを頂きたい

2014/03/12 19:09

このQ&Aのポイント

jQueryに関してアドバイスを求めています。ページ内に複数のスライダーを設置したいが、現状全てのスライダーが連動してしまう問題が発生しています。
現在のページでは、サムネイル画像をクリックするとすべてのスライダーのメイン画像が切り替わります。各スライダーのサムネイル画像をクリックしたときに、対応するスライダーのメイン画像のみが切り替わるようにしたいです。
どなたかjQueryに詳しい方からアドバイスを頂けると助かります。よろしくお願いします。

gumkucha_max
お礼率66% (2/3)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2014/03/13 11:03 回答No.2

id="MainPhoto"という要素を対象にして処理をしていますが、id="MainPhoto"が複数あるので同じように処理されてしまっているようです。そもそも同じidが複数あることが文法違反ですけれど。（jQueryではエラーとしてはいないようですが）解決方法としては、イベント処理の記述を要素の相対的な位置関係を利用して記述するか、または、オブジェクト化しておいて複数設置するかでしょうか。前者の例として…（全体に簡略化しています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .changeBox * { padding:0; margin:0; list-style-type:none; } .changeBox{ padding:0 10px; width:30%; float:left; } .changeBox img{ width:100%; } .changeBox .thumBox li{ width:20%; float:left; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".changeBox .thumBox img").click(function(){ $("div.mainImg img", $(this).parents(".changeBox")).attr("src", $(this).attr("src")); }); }); </script> </head> <body> <div id="container"> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-01.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-01.jpg" alt=""></li> <li><img src="test/image-l-02.jpg" alt=""></li> <li><img src="test/image-l-03.jpg" alt=""></li> </ul> </div> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-04.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-04.jpg" alt=""></li> <li><img src="test/image-l-05.jpg" alt=""></li> <li><img src="test/image-l-06.jpg" alt=""></li> </ul> </div> <div class="changeBox"> <div class="mainImg"><img src="test/image-l-07.jpg" alt=""></div> <ul class="thumBox"> <li><img src="test/image-l-07.jpg" alt=""></li> <li><img src="test/image-l-08.jpg" alt=""></li> <li><img src="test/image-l-09.jpg" alt=""></li> </ul> </div> </div> </body> </html> なお、一旦hide()してからfadeIn()するような場合、hide()した時にレイアウトが変わらないようにしておかないと、画面がちらつきますよ。

質問者