对子元素的链接引用不起作用 JQuery

Question

我确信我遗漏了一些基本的东西，但过去一个小时我一直在 googling/trying 东西，但没有取得任何进展。

非常简单：我想在单击父元素时 show/hide 一个子元素（使用 css visibility 属性）。这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div onclick="test()">
    <h2 class="t"> HI THERE</h2>
</div>

<script>
    function test() {
        var t = $(this).children('.t'); //THIS RETURNS [OBJECT OBJECT]
        alert(t.attr('class')); //THIS IS "undefined"
        t.css('visibility','hidden'); //THIS DOES NOT WORK
        // $('.t').css('visibility','hidden'); //THIS WORKS
    };
</script>

我已经尝试了 .find() .children() 和 .siblings()。应该回答我的问题的一个很好的堆栈溢出 post 没有 - 我尝试了每个 answer/comment。我也尝试过寻找其他方式来引用这个元素，但它需要来自被点击的父元素（"t" class 中的元素太多，无法通过 id 引用）。但是，它可以通过标签名来引用（被点击的父节点只有一个子节点）。

非常感谢所有帮助！

Answer 1

当this用于此上下文（在函数中）时，它代表一个全局window对象。

将您的函数更改为

function test(element) {
    var t = $(element).children('.t'); 
    //other calls
}

...并在您的 onclick 中发送 this 作为参数：

<div onclick="test(this)">...</div>

对子元素的链接引用不起作用 JQuery

Chained reference to child element not working JQuery

css

jquery

parent-child