解けなかった JavaScript のクリックイベント
授業で HTML, CSS, JavaScript を触るようになってきた。もともとそれらについて多かれ少なかれ知識はあるので、進行にはついていけているのだけど、自分で少し拡張を加えようとしてハマったのでメモ。
授業内容
以下のようなコードを書いた。各 イメージは 1600x1200 くらいととても大きなもの。position: absolute
の見えない画像がページ左上に配置してある。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> <link rel="stylesheet" href="./style.css"> </head> <body> <img src="img/1.jpg" id="bigImg"> <div> <img src="img/1.jpg" class="thumbnail"> <img src="img/2.jpg" class="thumbnail"> <img src="img/3.jpg" class="thumbnail"> <img src="img/4.jpg" class="thumbnail"> </div> <script src="./app.js"></script> </body> </html>
.thumbnail { width: 300px; } #bigImg { visibility: hidden; position: absolute; top: 0; width: 100%; }
こんな感じ。
そして、並べられたサムネイルをクリックすると#bigImg
がクリックした画像になってビジブルになるスクリプトを書いた。書いたんだけど、これが #bigImg
を表示したあとはそのままで、リロードしないと表示が切り替わらないというものだった。また、img タグにonClick="displayImg('1.jpg')"
と記述してあったことも気になった(onClick にはいろいろあるけど、なんか気持ち悪いので書きたくないなと思った)。
それでなんとか授業中に、JS だけでイベントを管理して、かつ#bigImg
がビジブルの状態で再度クリックすると消えてくれるものを書こうとした。
書けなかった。
家に帰ってやってみるとできた。
できた
授業中に考えていたアプローチはこうだ。
- クリックされた時に
document.onclick
を発火させて#bigImg
を隠す - さらにそのクリックが
thumbnail
に対するものならば、#bigImg
のsrc
を変更して、可視化
出来なくはないだろうけど、わざわざややこしく考えていた。これだけでよかったんだ。
- クリックされたものがサムネイルなら
#bigImg
のソースを変更して、表示する - クリックされたものがサムネイルでないなら
#bigImg
を隠す
var bigImg = document.getElementById('bigImg'); document.onclick = function (event) { if (event.target.className == 'thumbnail') { bigImg.src = event.target.src; bigImg.style.visibility = 'visible'; } else { bigImg.style.visibility = 'hidden'; } }
もっと良い方法があれば教えてほしい。
なんてことない簡単なものだったのにできなかったことが悔しい。