javascript ビューアー

2021年8月25日 23:39

こんにちは、fukuです
今回は、data属性を使ったビューアーを勉強したのでそのアウトプットとします。

まず、コードを貼ります

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <title></title>
 </head>
 <body>

   <section>
     <h1>ビューアー</h1>
   </section>

   <main>

     <div id="main_img">
       <img src="615403_m.jpg" alt="photo" id="bigimg" height="300px" width="500px">
     </div>

     <ul>
       <li><img src="615403_m.jpg" data-image="615403_m.jpg" class="thumb" alt="photo1" height="100px" width="200px"></li>
       <li><img src="1470309_m.jpg" data-image="1470309_m.jpg" class="thumb" alt="photo2" height="100px" width="200px"></li>
       <li><img src="2220165_s.jpg" data-image="2220165_s.jpg" class="thumb" alt="photo3" height="100px" width="200px"></li>
     </ul>

   </main>

   <script type="text/javascript">
     'use strict'

     // liのクラスを取得する（３つ分）
     const thumbs = document.querySelectorAll('.thumb')

     // 繰り返しの処理を作る
     thumbs.forEach(function(item, index){
       //　この部分を繰り返す　 liをクリックしたら
       item.onclick = function(){
         // 変えたい所のidを取得してimgのsrcを　liのdate属性の値に変更する
         document.getElementById('bigimg').src = this.dataset.image;
       }
     });

   </script>
 </body>
</html>

html

<main>

     <div id="main_img">
       <img src="615403_m.jpg" alt="photo" id="bigimg" height="300px" width="500px">
     </div>

     <ul>
       <li><img src="615403_m.jpg" data-image="615403_m.jpg" class="thumb" alt="photo1" height="100px" width="200px"></li>
       <li><img src="1470309_m.jpg" data-image="1470309_m.jpg" class="thumb" alt="photo2" height="100px" width="200px"></li>
       <li><img src="2220165_s.jpg" data-image="2220165_s.jpg" class="thumb" alt="photo3" height="100px" width="200px"></li>
     </ul>

   </main>

まず
1 クリックしたら大きく表示される部分
2 大きく表示させたい部分
をそれぞれ用意して

大きく表示させたい部分には、id="bigimg"として
大きく表示させたい部分には、
class="thumb"とdata-img="画像URL"（data属性）
と入力しておきます。

javascript

   <script type="text/javascript">
     'use strict'

     // liのクラスを取得する（３つ分）
     const thumbs = document.querySelectorAll('.thumb')

     // 繰り返しの処理を作る
     thumbs.forEach(function(item, index){
       //　この部分を繰り返す　 liをクリックしたら
       item.onclick = function(){
         // 変えたい所のidを取得してimgのsrcを　liのdate属性の値に変更する
         document.getElementById('bigimg').src = this.dataset.image;
       }
     });

   </script>

まず、大きくさせたいclassをdocument.querySelectorAll(.thumb)すると、
3つ分のliのclassが配列のように（nodeList）取得されます。
forEach文が使えるので、
thumbの繰り返し処理を作ります。
繰り返し内容はitemにはthumbsの要素が入っているので
item.onclick = function(){}を作って、
大きく表紙させたいidを取得してそのsrcをdata-image="画像URL"の値に変更する。

という流れで終了です。

感想

ふぅー、お疲れ様です。
ここまで見てくれた方、ありがとうございました。

たまに復習しないと
forEach文とか、使い方忘れちゃうよねw

途中、itemとindexってなんじゃこりゃ？みたいになりました。
今回はdata属性を使ってみましたが他のやり方も調べてみたいと思います！

この記事が気に入ったらサポートをしてみませんか？