jquery - どのようにjqueryイベントハンドルを1つに結合しますか?

Question

jqueryを使うようになって、以前よりは便利になったのですが、次のような質問に戸惑うことが
あります。

<a class="p" href="javascript:;">ABC</a>   
<a class="n" href="javascript:;">EFG</a>

$(function(){

   var p = $('a.p');
   var n = $('a.n');

  p.on('mouseover',function(){
       $(this).css('color','red');
   }).on('mouseout',function(){
       $(this).css('color','black');
  });

  n.on('mouseover',function(){
     $(this).css('color','red');
  }).on('mouseout',function(){
     $(this).css('color','black');
  });

});

// You know it in javascript,we can do like this:

n[0].onmouseover = p[0].onmouseout = function(){ ....}

//and how about in jquery?

Answer 1

$(function(){
  $('a.p,a.n').on('mouseover',function(){
       $(this).css('color','red');
   }).on('mouseout',function(){
       $(this).css('color','black');
  });
});

ここで複数の要素を選択するためのドキュメントを参照してください

Answer 2

マルチセレクターとホバーを使用します。

$(function(){
  $('a.p,a.n').hover(function(){
    $(this).css('color','red');
  },function(){
    $(this).css('color','black');
  });
});

Answer 3

少なくとも3つの方法があります。セレクターを組み合わせる：

$( 'a.p, a.n' ).on('mouseover',function(){
    $(this).css('color','red');
}).on('mouseout',function(){
    $(this).css('color','black');
});

...または両方に同じ関数を使用します。

var mouseoverevent = function() {
    $(this).css('color','red');
};

var mouseoutevent = function() {
    $(this).css('color','black');
};

p.on('mouseover', mouseoverevent).on('mouseout', mouseoutevent);
n.on('mouseover', mouseoverevent).on('mouseout', mouseoutevent);

（後者は、この単純な例では少しやり過ぎですが、より複雑な場合に役立ちます。）

変数を保持したい場合、3番目の方法はそれらを組み合わせる方法です。

p.add( n ).on('mouseover',function(){
    $(this).css('color','red');
}).on('mouseout',function(){
    $(this).css('color','black');
});