javascript 画像をクリックで切り替える

質問

javascriptについて質問させていただきます。

<script type="text/javascript" defer>
$(function(){
$('.thmbnail').hover(
function(){
$("#product_large_image").attr('src', $(this).attr('src'));
},
function(){
$("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source'));
}
);
});
</script>

こちらが現在の記述です。
画像のパスを指定できないため、.thmbnailと#product_large_imageで指定しているようです。

＃product_large_imageは
<img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" />

.thmbnailは
<img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" />

となっており、画像のパスが変動するシステムです。

現在の記述はhoverによってマウスオーバーで画像が切り替わるシステムなのですが、
これをクリックで切り替わるようにしたく、
hoverをclickに変えたところ、
動かなくなってしまいます。

対処法を教えていただければと存じます。
よろしくお願い致します。

回答No.1

askaaska · ベストアンサー

hoverをclickに変えただけじゃ動かないわよ

hoverの第１引数は、マウスオーバーしたときの処理
第２引数は、マウスアウトしたときの処理を記述しているの

でもclickはそもそも第２引数がないの
第１引数に、クリックしたときの処理を書くだけなの

なので、第１引数のfunction内に
画像を切り替える処理を書かないとダメ
もしもclickするごとに入れ替えるのなら
現在の画像がどっちかを確認するようなことも必要ね
このつくりならsrc属性とdata-image-sourceを入れ替えるだけで
よさそうだけど