无法使用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);
})

或带有箭头功能的

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

---

有关箭头功能的更多信息：

• Concise article from Wes Bos
• Good video from MPJ
• MDN documentation

Answer 3

请勿使用箭头功能（() => {}）使用经典功能声明（function() {}）。箭头函数不会将this绑定到当前作用域。

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

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