Jak uzyskać tekst kotwicy / href po kliknięciu za pomocą jQuery?


113

Rozważ, że mam kotwicę, która wygląda tak

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

UWAGA: Nie będzie żadnego identyfikatora ani klasy dla kotwicy ...

Chcę uzyskać href / text w jQuery onclicktej kotwicy.

Odpowiedzi:


242

Uwaga: zastosuj zajęcia info_linkdo dowolnego linku, z którego chcesz uzyskać informacje.

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

Dla href:

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

Tekst:

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

.

Aktualizacja na podstawie edycji pytania

Możesz je teraz zdobyć w ten sposób:

Dla href:

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

Tekst:

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

1
Spowoduje to zerwanie, jeśli inny element ma łącze z nazwą klasy. Lepiej jest również określić selektor tagu.
rahul

@rahul: To zabawne, nie będzie, linkklasa powinna być przeznaczona dla konkretnych linków, z których chce uzyskać informacje.
Sarfraz

Ale co, jeśli jest tam następujący znacznik,<div class='link' />
rahul

@rahul: znowu robi się zabawnie, mógłby nadać swoim linkom dowolną nazwę.
Sarfraz,

możesz użyć this.hash zamiast $ (this) .attr ('href')
meo

6

Edytowano, aby odzwierciedlić aktualizację pytania

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

który będzie kierowany na wszystkie linki, nawet te, którymi może nie być zainteresowany
Sarfraz

4

Bez jQuery:

Nie potrzebujesz jQuery, gdy jest to tak proste przy użyciu czystego JavaScript. Oto dwie opcje:

  • Metoda 1 - pobierz dokładną wartość hrefatrybutu:

    Wybierz element, a następnie użyj .getAttribute()metody.

    Ta metoda nie zwraca pełnego adresu URL, zamiast tego pobiera dokładną wartość hrefatrybutu.

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


  • Metoda 2 - Pobierz pełną ścieżkę adresu URL:

    Wybierz element, a następnie po prostu uzyskaj dostęp do hrefwłaściwości .

    Ta metoda zwraca pełną ścieżkę adresu URL.

    W tym przypadku: http://stacksnippets.net/relative/path.html.

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


Jak sugeruje twój tytuł, chcesz uzyskać hrefwartość po kliknięciu. Po prostu wybierz element, dodaj detektor kliknięć, a następnie zwróć hrefwartość za pomocą jednej z wyżej wymienionych metod.

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

Zaktualizowany kod

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

będzie kierować reklamy na wszystkie linki, nawet te, którymi może nie być zainteresowany.
Sarfraz,

Ale dzieje się tak zgodnie z jego znacznikiem, w którym nie określił nazwy klasy.
rahul

Powinieneś poprowadzić go tam, gdzie możliwa jest poprawa :)
Sarfraz

możliwym powodem głosowania negatywnego może być to, że pytający nie szuka tego, z czym zrobiłeś$('a','div.res')
Sarfraz

0

Alternatywny

Korzystając z przykładu z Sarfraz powyżej.

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

Dla href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.