JavaScriptを使って、サムネイル画像クリックによるイメージの切り替えについて

サムネイル画像クリックによるイメージの切り替え

HTML <section>
<div class=”center”>
<div>
<img src=” A ” id=”bigimg”>
</div>
<ul>
<li><img src=” A ” class=”thumb” data-image=” A “></li>
<li><img src=” B ” class=”thumb” data-image=” B “></li>
<li><img src=” C ” class=”thumb” data-image=” C “></li>
</ul>
</div>
</section>

CSS section img {
max-width: 100%;
}
.center {
margin: 0 auto 0 auto;
width: 50%;
}
ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
float: left;
margin-right: 1%;
width: 24%;
}

JavaScript var thumbs = document.querySelectorAll(‘.thumb’);
for(var i = 0; i < thumbs.length; i++){
thumbs[i].onclick = function(){
document.getElementById(‘bigimg’).src = this.dataset.image;
};
}

解説

「var thumbs = document.querySelectorAll('.thumb');」→　querySelectorAllメソッドは、()内で指定されたCSSのセレクタにマッチする要素すべてを取得します。

「 for(var i = 0; i < thumbs.length; i++){ 」→　thumbs要素すべてにイベントを設定するためfor文を使い、繰り返し処理をします。

「 thumbs[i].onclick = function(){　」　→　変数thumbsのi番目の要素にonclickイベントを設定

「document.getElementById('bigimg').src = this.dataset.image;」→　thisはイベントが発生した要素（ここではonclickイベントが発生、クリックされた要素）を指します。thisはイベントに設定するファンクションの中で使えます。

HTMLでのdata-image属性においてimageの部分は自由に決めてよい（ただし大文字は使えない）

JavaScriptでdata-（つけた名前）属性の値を読み取るには、「取得した要素.dataset.つけた名前」

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。