javascript - 单击时如何在表格行内切换 div

Question

只是在解决这个 jquery 问题时遇到了一点问题。我有一张表格，每行显示一些数字。我希望这样做，以便当我单击作为 href 链接的数字时，它会切换最初隐藏的名为“test”的 div。目前使用我的代码，当我单击带有数字的一行时，所有行都会切换，因为它们共享相同的类名。如何解决此问题，以便只有被单击的行才会切换？

表格和内容的一些附加信息是动态生成的。

我的 HTML

<table>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:46</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
</table>

我的JS如下

$('.test').hide();
$('.showinfo').click(function(){
    $('.test').toggle();    
});

谢谢。

Answer 1

试试这个

$('.showinfo').click(function(e){
    e.preventDefault();
    $(this).closest('td').find(".test").toggle();
});

DEMO.