jQueryのは、私は同じページに次のようないくつかのテーブルをしたTR

Question

た後で、テーブル内のすべてのTRを取得します'head'がマウスオーバーして同じテーブルにあるすべての 'attributeVal'クラスを表示するときです。私は$（ '。attributeVal'）を実行するので、ページにある 'attributeVal'にすべて影響します。

また、そのテーブルを離れると、現在のテーブルのすべての 'attributeVal'がhide（）になります。

ありがとうございました。

Answer 1

この方法は、マウスオーバーに行を示し、そして離れてホバリングするときにそれらを隠し。行を表示したままにする場合は、.toggle()を.show()に置き換えます。 mouseleaveとmouseoverを使用して

$('table').mouseleave(function() { 
    $(this).find('.attributeVal').hide(); 
}); 
$('.head').mouseover(function() { 
    $(this).nextAll('.attributeVal').show(); 
}); 

。
デモ：http://jsfiddle.net/t7CWp/（jQuery 1.5.1でも動作します）

Answer 2

だけ現在のテーブル内の一致する要素を選択するように、コンテキストとして.attributeValセレクタに含まれている表を渡し：

$(".head").mouseover(function() { 
    $(".attributeVal", $(this).closest("table")).show(); 
}); 

Answer 3

.siblings（）メソッドを探しています。すべての兄弟を選択します（オプションのセレクタに一致します）。テーブルを離れるときにのみ、テーブルの上にmouseleaveイベントを使用する要素を非表示にする

：

$('.head').on('mouseover',function() { 
    $(this).siblings('.attributeVal').show(); 
}) 
$('table').on('mouseleave',function() { 
    $(this).find('.attributeVal').hide(); 
}); 

あなたがここにアクションでそれを見ることができます：http://jsfiddle.net/ATWFH/

また代わりのページ.attributeValを非表示にしますCSSでロードすると、CSSを直接​​非表示にすることができます。

<style> 
    .attributeVal { display: none; } 
</style>