JQuery kullanarak tıklama üzerine bağlantı metni / href nasıl alınır?


113

Buna benzeyen bir çapam olduğunu düşünün

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

NOT: Çapa için herhangi bir kimlik veya sınıf olmayacak ...

onclickBu çapanın jQuery'sinde href / text almak istiyorum .

Yanıtlar:


242

Not: Sınıfı info_link, bilgi almak istediğiniz herhangi bir bağlantıya uygulayın .

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

Href için:

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

Metin için:

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

.

Soru Düzenlemesine Göre Güncelleme

Onları şimdi şu şekilde alabilirsiniz:

Href için:

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

Metin için:

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

1
Başka bir öğenin sınıf adı bağlantısına sahip olması durumunda bu bozulacaktır. Etiket seçiciyi de belirtmek daha iyidir.
rahul

@rahul: Komik, olmayacak, linksınıfın bilgi almak istediği belirli bağlantılar için olması gerekiyor.
Sarfraz

Ama ya aşağıdaki işaret oradaysa,<div class='link' />
rahul

@rahul: Yine komikleşiyor, bağlantılarına herhangi bir benzersiz isim verebilir.
Sarfraz

$ (this) .attr ('href') yerine this.hash kullanabilirsiniz
meo

6

Güncellemeyi soruya yansıtmak için düzenlendi

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

ilgilenmeyebileceği tüm bağlantıları hedefleyecek
Sarfraz

4

JQuery olmadan:

Bunu saf JavaScript kullanarak yapmak bu kadar basit olduğunda jQuery'ye ihtiyacınız yoktur. İşte iki seçenek:

  • Yöntem 1 - hrefÖzniteliğin tam değerini alın :

    Öğeyi seçin ve ardından .getAttribute()yöntemi kullanın .

    Bu yöntem yok değil bunun yerine tam değerini alır, tam URL'yi dönmek hrefözniteliği.

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


  • Yöntem 2 - Tam URL yolunu alın:

    Öğeyi seçin ve ardından hrefözelliğe erişin .

    Bu yöntem, tam URL yolunu döndürür.

    Bu durumda: http://stacksnippets.net/relative/path.html.

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


Başlığınızın da ima ettiği gibi, hrefdeğeri tıklamada elde etmek istersiniz . Bir öğe seçin, bir tıklama olay dinleyicisi ekleyin ve ardından hrefyukarıda belirtilen yöntemlerden birini kullanarak değeri döndürün.

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

Güncellenen kod

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

ilgilenmeyebileceği tüm bağlantıları hedef alacak.
Sarfraz

Ancak bu, sınıf adı belirlemediği işaretine göredir.
rahul

İyileştirmenin mümkün olduğu yerlerde ona rehberlik etmelisiniz :)
Sarfraz

Olumsuz oylama için olası neden, soruyu soran kişinin ne yaptığınızı $('a','div.res')
aramaması olabilir

0

Alternatif

Yukarıdaki Sarfraz örneğini kullanarak.

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

Href için:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.