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();
});