时间戳

首页 > 解决方案 > 对子元素的链接引用不起作用 JQuery

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

问题描述

我确定我错过了一些基本的东西，但在过去的一个小时里我一直在谷歌搜索/尝试一些东西并且没有取得任何进展。

非常简单：我想在单击父元素时显示/隐藏子元素（使用 cssvisibility属性）。这是我的代码：

<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(). 一个应该回答我的问题的好的堆栈溢出帖子没有 - 我尝试了每个答案/评论。我也试图找到引用这个元素的其他方法，但它需要来自已单击的父级（“t”类中的元素太多，无法通过 id 引用）。但是，它可以被标签名引用（被点击的父级只有一个子级）。

非常感谢所有帮助！

标签： jquerycssparent-child

解决方案

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

将您的功能更改为

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

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

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

推荐阅读