JavaScript thisやonclickイベントを使って画像切り替え

JavaScript/HTML/CSS JavaScript

this

イベントが発生した要素を指す

onclickイベントを使った例

'use strict';
//画像を配列に格納
const thumbs = document.querySelectorAll('.thumb');
thumbs.forEach(function(item, index){
    //各画像がクリックされた時にイベントが発生
    item.onclick = function(){
        //イベントが発生した要素のimageデータをsrcに代入
        document.getElementById('bigimg').src = this.dataset.image;
    }
});

HTML

<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>
            </ul>