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

投稿者: | 2022年3月11日

2,343 views

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

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除外簡易実装済
  • 2025-07-11: 0回
  • 2025-07-10: 0回
  • 2025-07-09: 0回
  • 2025-07-08: 0回
  • 2025-07-07: 0回
  • 2025-07-06: 0回
  • 2025-07-05: 0回
  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です


    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)