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

谢谢。

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/

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

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