HP作ってみる!

(125) JavaScriptで複数の要素に同じイベントを処理させる。

2,840 views

この記事は最終更新から 1514日 が経過しています。

1. やりたいこと

複数のセレクタを指定し、それぞれの要素に対するイベント発生時に、同じ処理をさせたい。

2. やってみる

方法1 : each() で複数のセレクタを指定する。

each を使い、elem1 or elem2がクリックされたときに、elem3を fade outさせて消す。

$('#elem1, #elem2').each(function(){
  $(this).click(function(){
    $('#elem3').fadeOut('fast');
  });
});

方法2 : 別々にイベントハンドラを書く。

以下の二つのイベントハンドラを別々に記述する。
1) elem1をクリック → elem3を fade out
2) elem2がクリック → elem3を fade out

function fadeOut_elem3(){
  $('#elem3').fadeOut('fast');
}
$('#elem1').click(function(){
  fadeOut_elem3();
});
$('#elem2').click(function(){
  fadeOut_elem3();
});

アクセス数(直近7日): ※試験運用中、BOT除外簡易実装済
  • 2026-06-25: 0回
  • 2026-06-24: 1回
  • 2026-06-23: 3回
  • 2026-06-22: 4回
  • 2026-06-21: 7回
  • 2026-06-20: 0回
  • 2026-06-19: 2回
  • モバイルバージョンを終了