javascript - td 行上的 jQuery 单击事件未触发

Question

我有一个简单的 jQuery 位，如果选中，它会显示当前行下方的行。

如果对于所有 <td> 我想要什么只有一个元素可以触发此方法。

整体作品<tr>行

        $(document).ready(function(){

        $("#report > tbody > tr.odd").click(function(){
            $(this).next("#report tr").fadeToggle(600);
        });
    });

想做类似的事情(不起作用)

    $(document).ready(function(){

        $("#report > tbody > tr.odd > td.selected").click(function(){
            $(this).next("#report tr").fadeToggle(600);
        });
    });

Answer 1

你需要这样的东西:

 $(document).ready(function(){
    $("#report tr:not(.odd)").hide();
    $("#report tr:first-child").show();

    $("#report > tbody > tr.odd > td.selected").click(function(){
        $(this).closest("tr").next("tr").fadeToggle(600);
    });
});

由于您单击的是 td，因此在尝试获取下一行之前需要向上移动到该行。此外，此选择器在大多数情况下都应该以相同的方式工作:#report td.selected。由于您无法避免与 sibling 一起进入 #report，因此 #report tr 也可以只是 tr 在您的 next ()。