jQuery 仅在页面上显示/隐藏一项

Question

我的问题是，我有一些表数据通过 PHP while 循环从 MySQL 数据库加载到页面中，它列出了团队结果。在该循环中，有一个表行默认隐藏为“得分者”类，然后有一个显示/隐藏按钮来显示天气以显示或隐藏该行。

但是“scorers”类在页面上多次出现，因为有多个结果，因此如果您点击显示/隐藏按钮，它将打开所有具有“scorers”类的单元格。

示例代码在这里: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/