jquery - jquery 事件句柄如何合二为一？

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

至少有三种方式。组合选择器：

$( '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);

（后者在这个简单的例子中有点矫枉过正，但在更复杂的情况下很有用。）

如果要保留变量，第三种方法是将它们组合起来：

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

Answer 3

使用多选器和悬停..

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