Не удается получить значение href тега привязки с помощью jQuery

Я пытаюсь получить значение href тега привязки с помощью jQuery, но ключевое слово this не работает должным образом.

исходный код

Вот результат кода в консоли:

консоль devtools

Часть кода, с которой у меня возникли проблемы:

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

Как видите, ключевое слово this указывает на объект window. Этот код является частью расширения, которое я пытаюсь создать для Opera.


javascript jquery browser-extension opera-extension
person j.sell    schedule 28.06.2018    source источник
comment
это может помочь вам. stackoverflow.com/questions/2098408 /   -  person agDev    schedule 28.06.2018
comment
Добро пожаловать в Stack Overflow. Чтобы люди могли лучше помочь вам (и помочь тем, кто может прийти сюда в будущем), вы должны добавить свой соответствующий код здесь, а не размещать ссылку на изображение с кодом.   -  person crazymatt    schedule 28.06.2018
comment
Это может помочь и вам meta.stackoverflow.com/questions/285551/   -  person Emeeus    schedule 28.06.2018

Ответы (3)


arrow_upward
1
arrow_downward

Вы используете стрелочную функцию () => {..} вместо обычной функции 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);
})

Подробнее о функциях стрелок:

person user7637745    schedule 28.06.2018
comment
Пожалуйста! Какая реализация сработала лучше всего для вас? - person user7637745; 28.06.2018
comment
тот, у которого синтаксис функции, мне действительно нужно больше узнать о лямбда-выражении, его поведение отличается от того, которое я использовал для - person j.sell; 28.06.2018
comment
Хороший! Я обновил свой ответ несколькими полезными ссылками, чтобы помочь вам полностью понять функции стрелок в JavaScript. Получайте удовольствие и продолжайте в том же духе! - person user7637745; 28.06.2018

arrow_upward
1
arrow_downward

Это даст вам значение 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>

person agDev    schedule 28.06.2018
comment
проблема в том, что когда я использую функцию стрелки, ключевое слово this указывает на объект окна, а не на тег, вызвавший событие. я исправил, спасибо за ответ - person j.sell; 28.06.2018
comment
это работает хорошо, пока на странице не будет более 1 a. - person Liora Haydont; 28.06.2018
comment
смысл моего ответа состоял в том, чтобы продемонстрировать, как получить значение атрибута с помощью jquery, поскольку это название вопроса. - person agDev; 28.06.2018
comment
Я обновил ответ, чтобы взять элемент из события. так что это будет работать, даже если есть несколько одинаковых элементов - person agDev; 28.06.2018

arrow_upward
0
arrow_downward

Не используйте стрелочную функцию (() => {}), используйте классическое объявление функции (function() {}). Стрелочные функции не привязывают this к текущей области.

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

Вы можете узнать больше о функциях стрелок здесь .

person Karan    schedule 28.06.2018