单击时如何在表行内切换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。

Answer 2

这是js需要的东西

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

你可以在这里看到演示

Answer 3

接下来使用jQuery

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

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

Answer 4

用这个：

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

同时使用display：none设置.test; 来自CSS。

Answer 5

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

<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){...});

小提琴

Answer 6

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