Question

在我的index.php中，我有两行TABLE。其中一个包含INPUT class =“sipPacket”下一个TEXT，下一个INPUT类=“sipPacket”下一个TEXT。每两行都在TBODY中。

<table>
<tbody>
<tr><td><input class="sipPacket" type="radio" /></td></tr>
<tr><td>Some text 1...</td></tr>
</tbody>
<tbody>
<tr><td><input class="sipPacket" type="radio" /></td></tr>
<tr><td>Some text 2...</td></tr>
</tbody>
</table>

我只是想要当我检查一个单选按钮时，第二个'tr'后面的部分，下一个'tbody'中的文本“Some text 2”被隐藏，反之亦然。我做了这样的事情：

$('.sipPacket')
.live('click',function() {
    if($(this).is(':checked')) {
       $(this).parent().parent().parent().addClass('on').fadeIn().siblings().removeClass('on').children('tr:odd').fadeOut();
    }
});

它隐藏了第二个元素，但是当我按下这个隐藏元素上的无线电时，它不再显示它。

Answer 1

我相信这会做你想要做的事情（但我不是百分之百确定你想要实现的目标，而且可能有更简单的方法！）：

$(".sipPacket").click(function() {
    $(this).closest("tbody").children("tr:eq(1)").fadeIn().end()
        .siblings().children("tr:eq(1)").fadeOut();
});

这是一个working example。它使用tbody获取祖先closest（正如问题评论中所述，比使用parent().parent()等更容易），然后在第二个{{1}中淡出那个tr的孩子。然后使用tbody返回到原始匹配的元素集（恰好是end），获取该元素的兄弟（只有一个）并最终淡出第二个{ {1}}那个兄弟姐妹的孩子。

addClass和fadeIn无法正常工作

1 个答案: