6日目：イメージの切り替え

イメージ図の切り替えは下記の通り
まずHTML,CSS,JSを下記の通り準備する。

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

section img{
    max-width:100%;
}

.center{
    margin: 0 auto 0 auto;
    max-width:90%;
    width:500px;
}

ul{
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
}
li{
    flex:1 1 auto;
    margin-right:8px;
}
li:last-of-type{
    margin-right:0px;
}

const thumbs = document.querySelectorAll('.thumb');
thumbs.forEach(function(item,index){
  item.onclick = function() {
    document.getElementById('bigimg').src= this.dataset.image;
  }
});

上記の解説を行う。

querySelectorAllとは？

先日の項目でquerySelector自体は取り扱っているが、querySelectorは1つの要素しか取得することができない。
そのため、複数の要素を取得する際には下記のように行う。

document.querySelectorAll('CSSセレクタ');

上記の例だとCSSセレクタは.thumbが該当する。
これらのCSSセレクタで指定された要素全てを取得することができる。

配列の繰り返し
配列を繰り返し処理する方法として、forEachメソッドがある。これは下記のように書く。

配列.forEach(function(item,index){
  処理内容
});

これによりitemの部分に取得した要素が、indexにそれらの番号が0から入ることになる。

thisとは？
this は function を呼んだ時の . の前についているオブジェクトを指している
ただし、.の前に何もついていないときはwindowsオブジェクトを参照している。
(理解があいまいな為、補強の必要あり)

data-imageについて
ここではdata-imageと記載しているが、data-XXXとXXXの部分は好きに決めてよい。
これらのdata-XXXを読み取るためには

取得した要素.dataset.XXX

としてあげる必要がある。