【JavaScript】クリックした画像の属性を取得する

画像をクリックするとdata属性を拾うプログラムを作る

<img src="https://manabu-biology.com/wp-content/uploads/2020/11/Painting-Blog-Banner-2-160x160.png" class="thumb" data-nandemo="imge1">

<img src="https://manabu-biology.com/wp-content/uploads/2020/11/Painting-Blog-Banner-160x160.png" class="thumb" data-nandemo="imge2">

const thumbs = document.querySelectorAll('.thumb');

thumbs.forEach(function(item,index){
	item.onclick = function(){
  	console.log(this.dataset.nandemo);
    console.log(index);
  }
});

querySelectorAllとは

document.querySelectorAll(‘セレクタ’)は、指定したセレクタを持つ要素を全て取得するメソッドです。取得した要素は全て、定数「thumbs」に代入されています。つまり、配列に似たようなものとして格納されています（厳密には配列ではないので、配列メソッドは使えません）。

<img src="https://manabu-biology.com/wp-content/uploads/2020/11/Painting-Blog-Banner-2-160x160.png" class="thumb" data-nandemo="imge1">

<img src="https://manabu-biology.com/wp-content/uploads/2020/11/Painting-Blog-Banner-160x160.png" class="thumb" data-nandemo="imge2">

foreachメソッドとは

foreachメソッドではそれぞれの要素に対して、関数を実行しています。この関数を実行するときにはitemとindexのパラメーターが２つ渡されます。

itemにはそれぞれの要素（img要素）が代入されます。indexには配列の項目の番号（つまり何番目かの配列か）が入れられます。indexは無くても動きます。

要素がクリックされたらイベントを発生させる.onclick

itemの要素がクリックされたらイベントを発生させるには、「.onclick」を設定し、その後にイベント内容を記します。

item.onclick = function(){
  	console.log(this.dataset.nandemo);
  }

thisとは、「イベントが起こった要素」を指します。thisはイベントが起こった関数内で使われます。

datasetとは

datasetとはdata属性への読み込み・書き込みへのアクセスを行います。dataset.nandemoは、今回つけたデータ属性「data-nandemo」の値にアクセスしています。

データ属性は、data-○○○と自分で決めることができる属性です。クリックすると、データ属性の値を出力します。

クリックしたら他の画像をその画像に変えるコード

See the Pen 画像変更 by バイオハックch (@synd1090) on CodePen.

先ほどのプログラムと同じ要領で、画像を変えるコードも書けます。

const thumbs = document.querySelectorAll('.thumb');

thumbs.forEach(function(item,index){
	item.onclick = function(){
  	document.getElementById('change').src = this.src; 
  }
});

id属性がchangeの画像のsrcの値を、クリックした要素のsrcの値に代入するだけです。簡単ですね。