JavaScriptを使ってクリック時などに要素のclassからidを取得する方法です。

クリック時・マウスホバー時・ドラッグ時などのパターンを紹介しています。

要素のクリック時にclassからidを取得する

JavaScriptを使って要素のクリック時にclassからidを取得するサンプルコードです。

See the Pen JavaScript click on class to get id by yochans (@yochans) on CodePen.

addEventListener()のクリックイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。

HTMLにはクラス名targetを指定した要素を3つ作成し、各要素に「a」「b」「c」というid名を指定しています。

<div class="target" id="a">a</div>
<div class="target" id="b">b</div>
<div class="target" id="c">c</div>
<p id="log"></p>

jqueryであれば、短く記述可能ですがJavaScriptの場合は、ループ処理を使って同じclass名を持つ要素毎にaddEventListener()()を定義します。

addEventListener()()発火時に要素の情報を取得するため、「event」という変数を利用します。

クリックされた要素のid名を取得はevent.target.idで可能です。

また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。

サンプルではログ表示用に「log」というidのp要素にinnerHTMLを使ってクリックした要素のid名を表示しています。

// tagetclassグループで指定
const target = document.querySelectorAll('.target')

// for分で要素数分ループ処理
for (let i = 0; i < target.length; i++) {
	// クリックイベントを追加
	target[i].addEventListener('click', () => {
		// idを取得してログに出力する
		document.querySelector('#log').innerHTML = event.target.id + `をクリックしました。`;
	}, false)
}

要素のマウスホバー時にclassからidを取得する

JavaScriptを使って要素のマウスホバー時にclassからidを取得するサンプルコードです。

addEventListener()のマウスホバーイベント時に引数を指定して要素の情報を取得し、要素に定義されているid名を取得します。

See the Pen JavaScript hover on class to get id by yochans (@yochans) on CodePen.

<div class="target_class" id="a">a</div>
<div class="target_class" id="b">b</div>
<div class="target_class" id="c">c</div>
<p id="log"></p>

addEventListener()でマウスホバーイベント発火時に要素の情報を取得するには変数「event」を利用します。

マウスホバーされた要素のid名を取得はevent.target.idで可能です。

また、対象の要素にid名が複数定義されている場合は、event.target.id[0]、event.target.id[1]と配列として取得する事が可能です。

// tagetclassグループで指定
const target = document.querySelectorAll('.target_class')

// for分で要素数分ループ処理
for (let i = 0; i < target.length; i++) {
	// マウスホバーイベントを追加
	target[i].addEventListener('mouseover', () => {
		// idを取得してログに出力する
		document.querySelector('#log').innerHTML = event.target.id + `をマウスホバー中。`;
	}, false)

}