Question

我正在创建一个链接库。

HTML：

<div class="link">
    <header>Test Header</header>
    <a href="http://www.google.com/">Click Here</a>
</div>

点击div中的任意位置时，我想转到A元素的网址。

使用JQUERY 3.2.1的Javascript：

$(function() {
    $("div.link").click(function() {
        $url = $this.children("a").attr("href");
        alert($url);
    });
});

它不会提醒网址

我也尝试过：

$(function() {
    $("div.link").click(function() {
        $url = $this.find("a:first-child").attr("href");
        alert($url);
    });
});

它返回一个集合而不是单个元素，所以我尝试了以下内容：

$function() {
    $("div.link").click(function() {
        $url = $this.find("a");
        alert($url[0].attr("href"));
    });
});

两种方法都没有效果。我已通过简单的警报测试点击选择器是否正常运行（＆＃34;你好＆＃34;）;

编辑：我使用的是$ this而不是$（this）。

Answer 1

我想在点击div中的任何位置时转到A元素的URL。

根据您分享的代码，$this似乎是undefined

如果您只想获取子锚标记的href属性，那么只需

$("div.link").click(function() {
    var href = $(this).find("a").attr( "href" ); //attr will fetch the attribute of first element in the result of find
});

如果您想在{em>锚标记上click，请尝试使用以下方法之一

$("div.link").click(function() {
    $(this).find("a").first().click();
});

或

$("div.link").click(function() {
    $(this).find("a").click();
});

或

$("div.link").click(function() {
    $(this).find("a").trigger( "click" );
});

或者如果你只是想去网址

$("div.link").click(function() {
    window.location.href = $(this).find("a").attr( "href" );
});

Answer 2

如果要在单击div元素时获取href属性，可以考虑使用选择器$(".nameOfDivClass")。在所选元素上，您将绑定一个将获得href的函数。

$(".link").on("click", function(){
 console.log($(this).children("a").attr("href"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
    <header>Test Header</header>
    <a href="http://www.google.com/">Click Here</a>
</div>

Answer 3

如果您检查浏览器的控制台，则会出现$this is not defined错误。它应该是$(this)，以便将this（单击原始HTML元素）转换为jQuery对象，您可以在其上运行jQuery方法，如.find（）和.attr（）。

此外，此版本实际上会导致导航操作，而不仅仅是警告URL：

$("div.link").click(function() {
    $(this).find("a").click();
});

使用JQUERY获取子属性

3 个答案: