Photo by
yamamoto15
javascript ビューアー
こんにちは、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属性を使ってみましたが他のやり方も調べてみたいと思います！