2

我的问题是我有一些表数据通过 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>

问：

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

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

2 回答 2

3

通过这样做$('.scorers').toggle("fast");将针对所有TD 元素，您需要通过使用.scorers指向被点击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/

于 2013-04-21T09:57:39.637 回答
1

利用

$(this).closest('TR').next().find('.scorers').toggle("fast");
于 2013-04-21T10:04:31.633 回答