Wie bekomme ich mit jQuery Ankertext / href beim Klicken?


113

Bedenken Sie, ich habe einen Anker, der so aussieht

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

HINWEIS: Es gibt keine ID oder Klasse für den Anker ...

Ich möchte entweder href / text in der jQuery onclickdieses Ankers erhalten.

Antworten:


242

Hinweis: Wenden Sie die Klasse info_linkauf einen beliebigen Link an, von dem Sie die Informationen erhalten möchten.

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

Für href:

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

Für Text:

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

.

Update basierend auf Frage bearbeiten

Sie können sie jetzt so bekommen:

Für href:

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

Für Text:

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

1
Dies wird unterbrochen, wenn ein anderes Element den Klassennamen-Link hat. Besser auch die Tag-Auswahl angeben.
Rahul

@rahul: Es ist lustig, es wird nicht, die linkKlasse soll für die spezifischen Links sein, von denen er Informationen erhalten möchte.
Sarfraz

Aber was ist, wenn das folgende Markup vorhanden ist <div class='link' />
?

@rahul: es wird wieder lustig, er könnte seinen links jeden eindeutigen namen geben.
Sarfraz

Sie könnten die this.hash anstelle von $ (this) .attr ('href')
meo

6

Bearbeitet, um die Aktualisierung der Frage widerzuspiegeln

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

das wird auf alle Links abzielen, auch auf diejenigen, an denen er möglicherweise nicht interessiert ist
Sarfraz

4

Ohne jQuery:

Sie brauchen jQuery nicht, wenn es so einfach ist, dies mit reinem JavaScript zu tun. Hier sind zwei Möglichkeiten:

  • Methode 1 - Rufen Sie den genauen Wert des hrefAttributs ab:

    Wählen Sie das Element aus und verwenden Sie die .getAttribute()Methode.

    Diese Methode gibt nicht die vollständige URL zurück, sondern ruft den genauen Wert des hrefAttributs ab.

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


  • Methode 2 - Rufen Sie den vollständigen URL-Pfad ab:

    Wählen Sie das Element aus und greifen Sie einfach auf die hrefEigenschaft zu .

    Diese Methode gibt den vollständigen URL-Pfad zurück.

    In diesem Fall : http://stacksnippets.net/relative/path.html.

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


Wie Ihr Titel andeutet, möchten Sie den hrefWert beim Klicken erhalten. Wählen Sie einfach ein Element aus, fügen Sie einen Listener für Klickereignisse hinzu und geben Sie den hrefWert mit einer der oben genannten Methoden zurück.

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

Code aktualisiert

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

das wird auf alle Links abzielen, auch auf diejenigen, an denen er möglicherweise nicht interessiert ist.
Sarfraz

Dies entspricht jedoch seinem Markup, in dem er keinen Klassennamen angegeben hat.
Rahul

Sie sollten ihn führen, wo eine Verbesserung möglich ist :)
Sarfraz

Ein möglicher Grund für die Ablehnung könnte sein, dass der Fragesteller nicht nach dem sucht, was Sie getan haben$('a','div.res')
Sarfraz

0

Alternative

Am Beispiel von Sarfraz oben.

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

Für href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.