- 締切済み
JS switch文について
JavaScript初心者です。 下記では、div内でphoto1.jpgを表示していますが、ここが別のコードで他の画像に書き換えられるため、下のjsで、画像がクリックされた際にsrcの中身を確認し、それに応じてアンカータグのhrefを書き換えようとしています。 ですが、参照の仕方が悪いのか、switch文が思惑通りに動いてくれません。 どなたか詳しい方、ご教授ください。よろしくお願いいたします。 $("#main a").click(function(){ var mimage = document.getElementById("main-img"); switch(mimage.src){ case "images/photo1.jpg": $("#main a").attr("href","sub1.html"); break; case "images/photo2.jpg": $("#main a").attr("href","sub2.html"); break; case "images/photo3.jpg": $("#main a").attr("href","sub3.html"); break; } }); <div id="main"> <a href="sub1.html"><img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /></a> </div>
- studioy_new
- お礼率50% (5/10)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- askaaska
- ベストアンサー率35% (1455/4149)
<div id="main"> <img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /> </div> こうしたらどお？ 何箇所か書き直す必要はあると思うけど いきなりリンクで飛ぶことはなくなるんじゃない？
- askaaska
- ベストアンサー率35% (1455/4149)
var mimage = document.getElementById("main-img"); var array = mimage.src.split("/"); switch(array[array.length-1]){ case "photo1.jpg": $("#main a").attr("href","sub1.html"); break; 以下略 } でいいと思う。
お礼
何度か動作確認をした結果、下記のことがわかりました。 main-imgをクリックしてリンク先を表示した後でブラウザの戻るボタンで戻り、main-img(その時点でphoto1に戻っている)を再度クリックすると、alertが表示されました。 その内容は下記の通りです。 file:///xxx/xxx/xxx/xxx/images/photo1.jpg これをcaseの条件にすると、その後の処理が動きます。 ただし、photo1以外がmain-imgに表示されている状態では何度クリックしてもalertは出ません。つまり、クリック時のfunction自体が動いていないようです。（いつも動いていると勘違いしていました。） つまり、main-imgをクリックした際、クリック時のfunctionが動く前にもともとリンクしていたsub1.htmlへ飛んでしまっているような感じです。 このような場合、どうすれば回避できるでしょうか。 何度もすみませんが、ご教示願えれば幸いです。
補足
ありがとうございます。 やってみましたが、だめでした…残念です。
- askaaska
- ベストアンサー率35% (1455/4149)
> alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 それは、switch文以前にその定義したfunctionが実行されていないんじゃないの？ 記述されたHTMLとJavaScriptだけじゃなく、<html>～</html>まで記述していただけるかしら。
補足
いえ、switch文の前に$("#main a").attr("href","sub3.html");を入れてみるとちゃんと変更されるので、それはないと思います。 でも原因は不明…なので、下記に一式貼付けてみます。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>トップのイメージ</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> * { margin:0; padding:0; border:0; } #container { width:820px; margin:20px; } #navi { width:106px; float:right; } #navi li { list-style-type:none; width:106px;/*float:left; */ } #navi li img { border:3px solid #ddd; } #main { width:700px; float:left; } #main a img { position:absolute; } </style> <script type="text/javascript"> $(function(){ $("#navi a").mouseover(function(){ $("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>"); $("#main img:last").fadeOut("fast",function(){ $(this).remove(); }); }); $("#navi a").click(function(){ $("a#vol1").attr("href","sub1.html"); $("a#vol2").attr("href","sub2.html"); $("a#vol3").attr("href","sub3.html"); $("a#vol4").attr("href","sub4.html"); $("a#vol5").attr("href","sub5.html"); $("a#vol6").attr("href","sub6.html"); }); $("#main a").click(function(){ var mimage = document.getElementById("main-img"); switch(true){ case /images\/photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /images\/photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /images\/photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; } /* switch(mimage.src){ case "images/photo1.jpg": $("#main a").attr("href","sub1.html"); break; case "images/photo2.jpg": $("#main a").attr("href","sub2.html"); break; case "images/photo3.jpg": $("#main a").attr("href","sub3.html"); break; } */ }); }); </script> </head> <body> <div id="container"> <div id="navi"> <ul> <li><a href="images/photo1.jpg" id="vol1"><img src="images/photo1_thum.jpg" alt="シャンデリア" width="100" height="75" /></a></li> <li><a href="images/photo2.jpg" id="vol2"><img src="images/photo2_thum.jpg" alt="バラ" width="100" /></a></li> <li><a href="images/photo3.jpg" id="vol3"><img src="images/photo3_thum.jpg" alt="海" width="100" /></a></li> <li><a href="images/photo4.jpg" id="vol4"><img src="images/photo4_thum.jpg" alt="門" width="100" /></a></li> <li><a href="images/photo5.jpg" id="vol5"><img src="images/photo5_thum.jpg" alt="海" width="100" /></a></li> <li><a href="images/photo6.jpg" id="vol6"><img src="images/photo6_thum.jpg" alt="あじさい" width="100" /></a></li> </ul> </div> <div id="main"> <a href="sub1.html"><img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /></a> </div> </div> <br style="clear:both" /> </body> </html>
- imq
- ベストアンサー率72% (16/22)
＞このコードでimagesを追加するときは 正規表現内では、/を\でエスケープしてください。 switch(true){ case /images\/photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /images\/photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /images\/photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; }
補足
説明ありがとうございます。 でも、残念ながら動きませんでした。
- imq
- ベストアンサー率72% (16/22)
回答1にもありますが、絶対パスになるからでしょう。 正規表現にしておけば絶対でも相対でも動くと思います。 switch(true){ case /photo1\.jpg/.test(mimage.src): $("#main a").attr("href","sub1.html"); break; case /photo2\.jpg/.test(mimage.src): $("#main a").attr("href","sub2.html"); break; case /photo3\.jpg/.test(mimage.src): $("#main a").attr("href","sub3.html"); break; }
補足
詳しくありがとうございます。 画像はすべてimagesというフォルダに入っているのですが、このコードでimagesを追加するときは、下記のようになるでしょうか？ 正規表現もよく分からなくて申し訳ないです。 case /images/photo1\.jpg/.test(mimage.src):
- askaaska
- ベストアンサー率35% (1455/4149)
switch文の直前に alert(mimage.src); を入れれば分かるかも？。
補足
alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 Firefox使っていますが、ブラウザによって変わるのでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
mimage.srcをswitchする前にalert(mimage.src)してみてください ブラウザの解釈によりフルパスで入っていたりする場合があります。
補足
alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。 Firefox使っていますが、ブラウザによって変わるのでしょうか？
お礼
ありがとうございます。やってみます。