1

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

谢谢你。

4

6 回答 6

2

尝试这个

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

演示。

于 2012-07-18T19:50:30.770 回答
1

这是js需要的

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

你可以在这里看到演示

于 2012-07-18T19:46:22.050 回答
1

接下来使用 jQuery

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

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

于 2012-07-18T19:46:38.807 回答
0

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

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

小提琴

于 2012-07-18T19:53:05.933 回答
0

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();
});​
于 2012-07-18T19:55:43.180 回答
0

用这个：

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

还将 .test 设置为 display:none; 从CSS。

于 2012-07-18T19:46:53.660 回答