JavaScript

サムネイル画像クリックによるイメージの切り替え | Explains how to switch images by clicking thumbnail images

HTML

<section>
<div class="center">
<div>
<img src=" A " id="bigimg">
</div>
<ul>
<li><img src=" A " class="thumb" data-image=" A "></li>
<li><img src=" B " class="thumb" data-image=" B "></li>
<li><img src=" C " class="thumb" data-image=" C "></li>
</ul>
</div>
</section>

CSS

section img {
max-width: 100%;
}
.center {
margin: 0 auto 0 auto;
width: 50%;
}
ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
float: left;
margin-right: 1%;
width: 24%;
}

JavaScript

var thumbs = document.querySelectorAll('.thumb');
for(var i = 0; i < thumbs.length; i++){
thumbs[i].onclick = function(){
document.getElementById('bigimg').src = this.dataset.image;
};
}

• 
• 
• 

解説

「var thumbs = document.querySelectorAll('.thumb');」→　querySelectorAllメソッドは、()内で指定されたCSSのセレクタにマッチする要素すべてを取得します。| "Var thumbs = document.querySelectorAll ('.thumb');" The querySelectorAll method gets all the elements that match the CSS selector specified in ().

「 for(var i = 0; i < thumbs.length; i++){ 」→　thumbs要素すべてにイベントを設定するためfor文を使い、繰り返し処理をします。| Use a for statement to set an event for all thumbs elements and iterate over.

「 thumbs[i].onclick = function(){　」　→　変数thumbsのi番目の要素にonclickイベントを設定。| Set the onclick event in the i-th element of the variable thumbs.

「document.getElementById('bigimg').src = this.dataset.image;」→　thisはイベントが発生した要素（ここではonclickイベントが発生、クリックされた要素）を指します。thisはイベントに設定するファンクションの中で使えます。| In "document.getElementById ('bigimg'). src = this.dataset.image;", this refers to the element where the event occurred (here, the onclick event occurred, the element that was clicked). This can be used in the function set for the event.

HTMLでのdata-image属性においてimageの部分は自由に決めてよい（ただし大文字は使えない）| You can freely decide the image part in the data-image attribute in HTML (however, uppercase letters cannot be used)

JavaScriptでdata-（つけた名前）属性の値を読み取るには、「取得した要素.dataset.つけた名前」| To read the value of the data- (name given) attribute in JavaScript, "get element.dataset.name given"

私は人から丁寧に教わりたい、という人にはこちらもどうぞ。

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー