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

投稿者: | 2022年3月11日

2,194 views

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

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();
});

コメントを残す

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


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