使用 JQuery 隐藏内表

发布于 2024-10-16 07:19:16 字数 1439 浏览 1 评论 0原文

我试图用 JQuery 隐藏内部表，其中触发隐藏的元素位于父表中。这是我的代码：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $(".collapsible").click(function(event) {

        event.preventDefault();

        inner = $(this).find(".inner");



        if($(inner).is(":visible") == true) {

            alert("hiding");

            $(inner).hide("slow");

        }

        else {

            alert("showing");

            $(inner).show("slow");

        }

    });

    $(".inner").each(function(index, element) {

        $(this).hide(0);

    });
});
</script>

<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>thing</td></tr><tr><td>another thing</td></tr>
</table>
</table>
<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>something else</td></tr><tr><td>another something else</td></tr>
</table>
</table>
</body>
</html>

有人知道为什么单击“单击此处”不会显示内表吗？提前致谢

原文

I'm trying to hide an inner table with JQuery where the element that triggers the hiding is in the parent table. Here's my code:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $(".collapsible").click(function(event) {

        event.preventDefault();

        inner = $(this).find(".inner");



        if($(inner).is(":visible") == true) {

            alert("hiding");

            $(inner).hide("slow");

        }

        else {

            alert("showing");

            $(inner).show("slow");

        }

    });

    $(".inner").each(function(index, element) {

        $(this).hide(0);

    });
});
</script>

<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>thing</td></tr><tr><td>another thing</td></tr>
</table>
</table>
<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>something else</td></tr><tr><td>another something else</td></tr>
</table>
</table>
</body>
</html>

Does anybody know why clicking on "click here" not make the inner table show? Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南冥有猫 2024-10-23 07:19:16

因为 .find() 正在 .collapsible 锚点内查找。您需要首先进入父表才能正确使用 .find()：

$(this).closest("table.outer").find("table.inner");

您的整个代码可以简化为：

$(function() {
    $(".collapsible").click(function(event) {
        event.preventDefault();
        $(this).closest("table.outer").find("table.inner").toggle('slow');
    });

    $(".inner").hide();
});

Because .find() is looking within the .collapsible anchor. You need to step up to the parent table first to use .find() correctly:

$(this).closest("table.outer").find("table.inner");

Your whole code can be simplified to:

$(function() {
    $(".collapsible").click(function(event) {
        event.preventDefault();
        $(this).closest("table.outer").find("table.inner").toggle('slow');
    });

    $(".inner").hide();
});

回复收藏 0 原文

~没有更多了~