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

今回は小さい画像をクリックすると大きく表示される方法を学びます。

HTML

メイン画像とサムネイル画像をそれぞれ配置します。
メイン画像にはid、サムネイル画像にはクラスとカスタムデータ属性data-imageを記入しておく。

※カスタムデータ属性とはdata-の後は自由に名前を決めることができる属性

<div class= "menu">
   <div>
　　　<!-- メイン画像 -->
     <img src="img1.jpg" id="bigimg">
   </div>
   <ul>
     <!-- サムネイル画像 -->
     <li><img src="img1.jpg" class="thumb" data-image="img1.jpg"></li>
     <li><img src="img2.jpg" class="thumb" data-image="img2.jpg"></li>
     <li><img src="img3.jpg" class="thumb" data-image="img3.jpg"></li>
     <li><img src="img4.jpg" class="thumb" data-image="img4.jpg"></li>
   </ul>
</div>

JavaScript

querySelectorAll(".thumb")はclass="thumb"が付与されているものをすべて取得して変数thumbsに代入している。querySelectorはCSSのセレクタにマッチする要素を取得できるが、Allを付けないと１番上の要素しか取得されない。

  // 変数thumbsにquerySelectorAllで取得したサムネイル画像を代入
  const thumbs = document.querySelectorAll(".thumb");
  // forEachメソッドで要素を分ける
  thumbs.forEach(function(item, index){
    // 画像がクリックされた時にイベントが発生する
    item.onclick = function(){
      // クリックされた画像のカスタムデータ属性を読み取り、id="bigimg"のsrcに代入
      document.getElementById("bigimg").src = this.dataset.image;
    }
  });

以上で切り替えができる様になりました。

最後に

見たらわかるけど自分では思いつかないだろうな...
自由自在に扱える様になりたい。