Question

我的问题是我有一些表数据从MySQL数据库加载到页面中，并带有PHP while循环，它列出了团队结果。在该循环中有一个表格行，默认情况下会被一类“记分员”隐藏，然后会有一个显示/隐藏按钮来说明天气以显示或隐藏该行。

但是那个“得分者”课程多次出现在页面上，因为有多个结果，所以如果你点击显示/隐藏按钮，它会打开所有具有“得分者”类别的单元格。

示例代码在这里：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");

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

2 个答案: