jQuery関連の質問

jquery イベント複数条件

jQueryon 引数

jQuery on click 複数

jQueryで複数要素のクリックイベントをまとめて取得する方法

同じクラス名を持つ複数のHTML要素に対して、jQueryを使って効率的にクリックイベントを取得・処理する方法を紹介します。

単一のクラス名で複数要素のクリックイベントを取得

$('.クラス名').on('click', function() { ... }); のように、jQueryセレクタでクラス名を指定することで、該当する全ての要素にクリックイベントを設定できます。
イベント発生時の処理は、function() 内に記述します。

thisキーワードでクリックされた要素を特定

イベント処理関数内で $(this) を使用することで、クリックされた要素自身を取得できます。
取得した要素に対して、text() や val() など、jQueryのメソッドを使用して操作できます。

イベントの伝播と停止

event.stopPropagation(); を使用すると、クリックイベントの上位要素への伝播を停止できます。
誤作動を防いだり、特定の要素のみにイベントを限定したい場合に有効です。

サンプルコード


<button class="target-button">ボタン1</button>
<button class="target-button">ボタン2</button>
<button class="target-button">ボタン3</button>

<script>
$('.target-button').on('click', function(event) {
  event.stopPropagation(); 
  alert($(this).text() + 'がクリックされました');
});
</script>

上記のコードは、「target-button」クラスを持つ全てのボタンにクリックイベントを設定し、クリックされたボタンのテキストをアラートで表示する例です。

その他関連キーワード

jQuery
クリックイベント
複数要素
イベントハンドラ
thisキーワード
イベント伝播

関連情報

よくある質問

質問	回答
複数のクラスを持つ要素にクリックイベントを設定するには？	`$('.クラス1.クラス2')` のように、複数のクラス名をドットで繋いで指定します。
クリックされた要素の親要素を取得するには？	`$(this).parent()` を使用します。
クリックイベントを一度だけ実行するには？	`one('click', function() { ... })` を使用します。

その他の参考記事:jquery on 複数

jquery イベント複数条件

jQueryon 引数