无法获取具有 jQuery 的锚标记的 href 值

Question

我正在尝试使用 jQuery 获取锚标记的 href 值，但 this 关键字没有按预期工作。

控制台中代码的结果如下：

我遇到问题的部分代码：

$('#container a').click(() => {
    console.log(this);
    let link = $(this).attr("href");
    console.log("from jquery - " + link);
    //chrome.tabs.create({ url: link });
});

如您所见，this 关键字指向 window 对象。此代码是我尝试为 Opera 构建的扩展的一部分。

Answer 1

这会给你 href 值

var href = $('a').attr('href');

这里有一个要测试的示例：

$(document).ready(function() {
  $("a").click(function(event) {
    var href = $(event.target).attr('href'); //this will give you the href value
    alert(href);
    event.preventDefault();
  });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<a href="I'm the href value">this is a test link, click me</a>

Answer 2

您使用的是箭头函数 () => {..} 而不是常规函数 function () {...}，这就是为什么您的 this 无法正常工作你已经料到了。

所以不是这个：

$('#container a').click(() => { ... });

使用这个：

$('#container a').click(function() { ... });

您的更新代码：

$('#container a').click(function () {
    console.log(this);
    let link = $(this).attr('href');
    console.log(link);
})

OR 用箭头函数：

$('container a').click(event => {
    let link = $(event.currentTarget).attr('href');
    console.log(link);
})

关于箭头函数的更多信息：

Answer 3

不要使用箭头函数 (() => {}) 使用经典函数声明 (function() {})。箭头函数不绑定 this 到当前范围。

$("#container a").click(function(){
    console.log(this);
    let link = $(this).attr("href");
    console.log(link);
})

您可以了解有关箭头函数的更多信息here。

无法获取具有 jQuery 的锚标记的 href 值

Can't get the href value of an anchor tag with jQuery

javascript

jquery

browser-extension

opera-extension