Question

我在同一页面上有几张这样的表格：

<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'都将隐藏（）。

感谢。

Answer 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）。

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/

而不是使用javascript隐藏.attributeVal页面加载，你可以给它们一个样式，所以它们直接被CSS隐藏：

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

JQuery在tr之后的表中获取所有tr

3 个答案: