单击时如何在表格行内切换div答案

【问题标题】：How to toggle div inside table rows when clicked单击时如何在表格行内切换div
【发布时间】：2012-07-18 19:43:40
【问题描述】：

只是在解决这个 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();    
});

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

试试这个

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

DEMO.

【讨论】：

【解决方案2】：

这就是js需要的东西

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

你可以看到demo here

【讨论】：

【解决方案3】：

使用 jQuery next

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

它将找到与选择器匹配的下一个元素。

【讨论】：

【解决方案4】：

使用这个：

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

同时将 .test 设置为 display:none;来自css。

【讨论】：

【解决方案5】：

jsFiddle：http://jsfiddle.net/3Wdp2/18/

您的以下行无效：

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

删除多余的<b> 标签。

$(".showinfo").click( function()
{
    // The TD above the link
    var parent = $(this).parent();

    // The TD child that is a div
    $(parent).children("div").toggle();
});

【讨论】：

【解决方案6】：

首先你需要关闭你的元素，这个：

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

应该只是

<a class="showinfo" href="#"><b>ID:12</b>Click me</a>

否则会有一个打开的<b>元素，你不能关闭另一个打开元素内的<a>元素等等。

然后只定位兄弟元素并按类过滤：

$('.showinfo').on('click', function(e){
  e.preventDefault();
  $(this).siblings('.test').toggle();    
});

您还应该阻止<a> 元素的默认操作以避免滚动到顶部。

如果代码像示例中那样工作，并且隐藏了两个元素，则无需委托事件，但在绑定处理程序时不存在的动态元素上，您需要将事件委托给最近的非动态元素，我以文档为例：

$(document).on('click', '.showinfo', function(e){...});

FIDDLE

【讨论】：