1

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?
4

3 に答える 3

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

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

于 2013-03-20T07:41:25.393 に答える
0

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

$(function(){
  $('a.p,a.n').hover(function(){
    $(this).css('color','red');
  },function(){
    $(this).css('color','black');
  });
});
于 2013-03-20T07:45:24.660 に答える
0

少なくとも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');
});
于 2013-03-20T07:44:41.413 に答える