index.html
<div class="center">
<div>
<img src="img1.jpg" id="bigimg">
</div>
<ul>
<li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
<li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
<li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
<li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
</ul>
</div>
大きな画像（メイン）をdivタグで囲みます。
そして、その他のサブ写真をulタグで囲み、liタグでリスト化をします。
そして、それらをcenterで囲みます。
index.js
const thumbs = document.querySelectorAll('.thumb');
thumbs.forEach(function(item, index) {
item.onclick = function() {
console.log(this.dataset.image);
}
});
前回の記事で、querySelectorメソッドを使用しましたが、今回使用するquerySelectorAllは(cssセレクター)内で指定された値をすべて取得してくれます。
今回は、thumbを指定しているので、ulの中にある全てを取得してくれます。
今回、配列の繰り返し処理でfoeEachを使います。
文法は以下のようになります。
配列.forEach(function (item, index){
処理内容
});
パラメータitemに配列の項目o番目の項目が入ります。二番目のパラメータでは、index番号が代入されます。
具体的な処理内容に入ります。
console.logのthisは、イベントが発生した要素を指します。今回では、data-image="img1.jpgになります。
htmlをみてみるとdata-imageとなっています。
これは、data-何でも好きな名前を付けても良いとなっています。
よって、(取得した要素(今回はonclick).dataset.何でも属性で付けた名前)になります。
このままでは、画像の切り替えができないのでJS側を書き換えて行きたいと思います。
index.html
document.getElementById('bigimg').src = this.dataset.image;
取得した要素（id▶bigimage).属性（src）（ここまでで読み取り） = 値(this.dataset.image)（ここまでで書き換え）になります。