javascript - 仅切换单击的行，带有使用 JQuery 的复选框

Question

您好，有人可以帮我吗？

我正在尝试执行以下操作：

<table>
<thead> 
    <tr> 
        <th>Select</th> 
        <th>Name</th> 
    </tr>
</thead>    
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        Sam, Walls
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about Sam.
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        John, Doe
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about John.
    </td>
</tr>
</table>

当单击带有 class="toggle" 的复选框时，我只希望它下面的行出现。

我的 JavaScript 代码运行得不太好，如下所示：

$('.show').hide();
$('.toggle').click(function(){
    $('.show').slideToggle();
});

目前它只会隐藏和切换 Sam, Walls 行。

编辑：使用类而不是 ID 后，隐藏问题似乎已经解决。但是，现在当我单击一个复选框时，两行会同时切换。我更新了上面的代码。

任何帮助，将不胜感激！

干杯。

Answer 1

我在评论中提到你不能有重复的 id，这也适用于你的#show元素。请改用该next功能，这样无论您按什么项目，下一个元素都会切换。就像是：

$('.show').hide();
$('.toggle').click(function(){
    $(this).closest('tr').next().slideToggle();
});

Answer 2

您可以使用您的类并使用单击的索引进行切换...

$('.show').hide();
$('.toggle').click(function(){
    $('.show').eq($('.toggle').index(this)).slideToggle();
});