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

您可以看到demo here

Answer 3

使用jQuery next

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

FIDDLE

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

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

6 个答案: