アプリ版：「スタンプのみでお礼する」機能のリリースについて

JS switch文について

締切済

  • 質問者：studioy_new
  • 質問日時：
  • 回答数：7件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7

  • 回答者： askaaska
  • 回答日時：

<div id="main">


<img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" />
</div>

こうしたらどお？

何箇所か書き直す必要はあると思うけど
いきなりリンクで飛ぶことはなくなるんじゃない？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。やってみます。

通報する
お礼日時：2011/06/21 22:51

No.6

  • 回答者： askaaska
  • 回答日時：

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;
以下略
}

でいいと思う。

この回答への補足

ありがとうございます。
やってみましたが、だめでした…残念です。

補足日時：2011/06/21 16:09
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

何度か動作確認をした結果、下記のことがわかりました。

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へ飛んでしまっているような感じです。

このような場合、どうすれば回避できるでしょうか。

何度もすみませんが、ご教示願えれば幸いです。

通報する
お礼日時：2011/06/21 17:34

No.5

  • 回答者： askaaska
  • 回答日時：

> 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-transitio …
<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. …
<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>

補足日時：2011/06/21 14:34
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： imq
  • 回答日時：

＞このコードで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;
}

この回答への補足

説明ありがとうございます。
でも、残念ながら動きませんでした。

補足日時：2011/06/21 14:28
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： imq
  • 回答日時：

回答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):

補足日時：2011/06/21 12:39
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： askaaska
  • 回答日時：

switch文の直前に


alert(mimage.src);
を入れれば分かるかも？。

この回答への補足

alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。
Firefox使っていますが、ブラウザによって変わるのでしょうか？

補足日時：2011/06/21 12:36
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

mimage.srcをswitchする前にalert(mimage.src)してみてください


ブラウザの解釈によりフルパスで入っていたりする場合があります。

この回答への補足

alert(mimage.src);を入れて、クリックしてみたのですが、変化なしでした。
Firefox使っていますが、ブラウザによって変わるのでしょうか？

補足日時：2011/06/21 12:35
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報