1

同じページにこのようなテーブルがいくつかあります。

<table>
<tr class="head">
    <th>
        Brand
    </th>
</tr>
<tr class="attributeVal">
    <td>
        text
    </td>
</tr>
<tr class="attributeVal">
    <td>
        text
    </td>
</tr>
....
</table>

そして、ページの読み込みがあります

$('.attributeVal').hide();

アイデアは、「head」がマウスオーバーして、同じテーブルにあるすべての「attributeVal」クラスを表示するときです。私は$（'。attributeVal'）を実行します。これは、ページにあるすべての'attributeVal'に影響を与えるためです。

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

ありがとう。

4

3 に答える 3

1

このメソッドは、マウスオーバー時に行を表示し、ホバーすると非表示にします。.toggle()行を表示したままにする場合は、に置き換え.show()ます。

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

およびを使用mouseleaveしmouseoverます。
デモ： http： //jsfiddle.net/t7CWp/（jQuery 1.5.1でも動作します）。

于 2012-04-26T09:27:00.183 に答える
0

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

$(".head").mouseover(function() {
    $(".attributeVal", $(this).closest("table")).show();
});
于 2012-04-26T09:26:59.093 に答える
0

.siblings（）メソッドを探しています。すべての兄弟を選択します（オプションのセレクターと一致します）。

テーブルを離れるときにのみ要素を非表示にするには、mouseleaveテーブルのイベントを使用します。

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

ここで実際の動作を確認できます：http：//jsfiddle.net/ATWFH/

また、JavaScriptでページの読み込みを非表示にする代わりに.attributeVal、スタイルを指定するだけで、CSSによって直接非表示にできます。

<style>
    .attributeVal { display: none; }
</style>
于 2012-04-26T09:28:16.500 に答える