Як отримати прив’язаний текст / href при натисканні за допомогою jQuery?


113

Подумайте, у мене є якір, який виглядає приблизно так

 <div class="res">
     <a href="~/Resumes/Resumes1271354404687.docx">
         ~/Resumes/Resumes1271354404687.docx
     </a>
 </div>

ПРИМІТКА. Для якіря не буде жодного ідентифікатора чи класу ...

Я хочу отримати або href / text у jQuery onclickцього якоря.

Відповіді:


242

Примітка. Застосуйте клас info_linkдо будь-якого посилання, з якого ви хочете отримати інформацію.

<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
    ~/Resumes/Resumes1271354404687.docx
</a>

Для href:

$(function(){
  $('.info_link').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

Для тексту:

$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});

.

Оновлення на основі редагування питань

Ви можете отримати їх такими:

Для href:

$(function(){
  $('div.res a').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

Для тексту:

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});

1
Це порушиться, якщо інший елемент має посилання на ім’я класу. Краще також вказати селектор тегів.
rahul

@rahul: Це смішно, це не буде, linkклас повинен містити конкретні посилання, з яких він хоче отримати інформацію.
Сарфраз

Але що робити, якщо є наступна розмітка<div class='link' />
rahul

@rahul: знову стає смішно, він може дати своїм посиланням будь-яке унікальне ім’я.
Сарфраз

ви можете використовувати this.hash замість $ (this) .attr ('href')
meo

6

Відредаговано для відображення оновлення для запитання

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});

яка буде націлена на всі посилання, навіть на ті, які можуть не зацікавитись
Сарфраз

4

Без jQuery:

Вам не потрібен jQuery, коли це так просто зробити за допомогою чистого JavaScript. Ось два варіанти:

  • Спосіб 1 - Отримайте точне значення hrefатрибута:

    Виберіть елемент, а потім скористайтеся .getAttribute()методом.

    Цей метод не повертає повну URL-адресу, натомість отримує точне значення hrefатрибута.

    var anchor = document.querySelector('a'),
        url = anchor.getAttribute('href');
    
    alert(url);
    <a href="/relative/path.html"></a>


  • Спосіб 2 - Отримайте повний шлях до URL-адреси:

    Виберіть елемент, а потім просто отримайте доступ до hrefвластивості .

    Цей метод повертає повний шлях до URL-адреси.

    У цьому випадку: http://stacksnippets.net/relative/path.html.

    var anchor = document.querySelector('a'),
        url = anchor.href;
    
    alert(url);
    <a href="/relative/path.html"></a>


Як випливає з назви, ви хочете отримати hrefзначення при натисканні. Просто виберіть елемент, додайте слухач подій клацання, а потім поверніть hrefзначення, використовуючи будь-який із згаданих вище способів.

var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});
<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>


0

Оновлений код

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});

яка буде націлена на всі посилання, навіть на ті, які, можливо, не будуть зацікавлені.
Сарфраз

Але це відповідно до його розмітки, в якій він не вказав назви класу.
rahul

Ви повинні направити його там, де можливе поліпшення :)
Сарфраз

Можливою причиною невдалого голосування може бути те, що запитуючий не шукає того, що ви робили з$('a','div.res')
Сарфраз

0

Альтернатива

Використовуючи приклад із Сарфраз вище.

<div class="res">
    <a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
        ~/Resumes/Resumes1271354404687.docx
    </a>
</div>

Для href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.