jQuery的显示/隐藏一个项目只在一个页面

Question

我的问题是，我有while循环，它列出了球队的结果被用PHP加载到页面从MySQL数据库中的一些表中的数据。在这个循环有是被默认使用的一类“得分手”的隐藏表行，有那么一个显示/隐藏按钮，说天气显示或隐藏该行。

但“射手”级页面上多次因为有多个结果，所以如果你打的显示/隐藏按钮，它会打开所有的细胞与类“得分手”的。

示例代码是在这里：http://codepen.io/anthwinter/pen/vLJiy

我需要能够只显示/隐藏只有结果目前的得分手。我最好的办法是什么？

在此先感谢

HTML：

<table> 
    <tr> 
     <td><h1>One</h1></td> 
    </tr> 
    <tr> 
     <td><a href="#" class="showHide">show/hide</a></td> 
    </tr> 
    <tr> 
     <td class="scorers">Show or hide this content one</td> 
    </tr> 
    <tr> 
     <td><h1>Two</h1></td> 
    </tr> 
    <tr> 
     <td><a href="#" class="showHide">show/hide</a></td> 
    </tr> 
    <tr> 
     <td class="scorers">Show or hide this content two</td> 
    </tr> 
</table> 

JQ：

$(document).ready(function() { 
    $(".scorers").hide(); 

    $(".showHide").click(function(event) { 
     event.preventDefault(); 
     $(".scorers").toggle("fast"); 
    }); 
}); 

Answer 1

通过只是在做$('.scorers').toggle("fast");将针对所有.scorers TD元素， 您需要点的使用this比做一些DOM遍历点击一个：

$(document).ready(function() { 
    $(".scorers").hide(); 

    $(".showHide").click(function(event) { 
     event.preventDefault(); 
     $(this).closest('tr').next().find('.scorers').toggle("fast"); 
    }); 
}); 

http://api.jquery.com/closest/
http://api.jquery.com/next/
http://api.jquery.com/find/

Answer 2

使用

$(this).closest('TR').next().find('.scorers').toggle("fast");