2

私はjQueryを初めて使用し、ロールオーバーの問題が発生しています。同じ「ロールオーバー」効果を複数のdivに適用しようとしていますが、機能しているようです。唯一のことは、すべてのdivが取得する要素をロールオーバーするときです。同じ効果、マウスオーバーで一度に1つずつ効果を適用したい場合は、ここに私のコードがあります

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

私はすべてのdivで同じクラスを持っていることを認識していますが、すべてのdivに一意のクラスまたはIDを与えずにこれを行う方法を見つけたいと思っていました。どんな助けでも、すばらしいことに感謝します。

4

2 に答える 2

2

$（this）を見てください。

説明：http：//remysharp.com/2007/04/12/jquerys-this-demystified/

これが私があなたに例を与えるためにそれをどのように使うかです

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});
于 2010-09-17T21:57:25.453 に答える
0

現在行っているのは、ホバーするたびにdiv.p-tab、で選択されたすべての要素のCSSクラスを切り替えることです。これは、CSSクラスのp-tabを持つ任意のDIVになります。

あなたがしたいのは、HTML構造のホバーされた要素の隣の要素のCSSクラスを切り替えることだけですdiv.pitem。

現在ホバーされているアイテムを見つけるには、イベントでthisキーワードを使用し、を使用してそれをjQueryオブジェクトに変換します$(this)。（隣接する）隣の要素を見つけるには、siblings関数を使用します。2つのホバーイベントを組み合わせることもできます。

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">&raquo;</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>
于 2010-09-17T21:49:33.310 に答える