Bagaimana cara mendapatkan anchor text / href saat diklik menggunakan jQuery?


113

Pertimbangkan saya memiliki jangkar yang terlihat seperti ini

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

CATATAN: Tidak akan ada id atau kelas apa pun untuk jangkar ...

Saya ingin mendapatkan href / teks di jQuery onclickdari jangkar itu.

Jawaban:


242

Catatan: Terapkan kelas info_linkke link mana pun yang ingin Anda dapatkan infonya.

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

Untuk href:

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

Untuk Teks:

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

.

Pembaruan Berdasarkan Edit Pertanyaan

Anda bisa mendapatkannya seperti ini sekarang:

Untuk href:

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

Untuk Teks:

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

1
Ini akan rusak jika elemen lain memiliki link nama kelas. Lebih baik juga menentukan pemilih tag.
rahul

@rahul: Ini lucu, tidak akan, linkkelas itu seharusnya untuk tautan khusus yang ingin dia dapatkan informasinya.
Sarfraz

Tapi bagaimana jika markup berikut ada,<div class='link' />
rahul

@rahul: kocaknya lagi, dia bisa kasih nama unik link apapun.
Sarfraz

Anda bisa menggunakan this.hash daripada $ (this) .attr ('href')
meo

6

Diedit untuk mencerminkan pembaruan atas pertanyaan

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

yang akan menargetkan semua tautan bahkan yang mungkin tidak dia minati
Sarfraz

4

Tanpa jQuery:

Anda tidak memerlukan jQuery jika melakukannya dengan sangat mudah menggunakan JavaScript murni. Berikut dua opsi:

  • Metode 1 - Ambil nilai pasti dari hrefatribut:

    Pilih elemen dan kemudian gunakan .getAttribute()metode.

    Metode ini tidak mengembalikan URL lengkap, melainkan mengambil nilai hrefatribut yang tepat.

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


  • Metode 2 - Ambil jalur URL lengkap:

    Pilih elemen dan kemudian akses hrefpropertinya .

    Metode ini mengembalikan jalur URL lengkap.

    Dalam hal ini: http://stacksnippets.net/relative/path.html.

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


Seperti yang tersirat pada judul Anda, Anda ingin mendapatkan hrefnilai saat diklik. Cukup pilih elemen, tambahkan pemroses kejadian klik, lalu kembalikan hrefnilai menggunakan salah satu metode yang disebutkan di atas.

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

Kode diperbarui

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

yang akan menargetkan semua tautan bahkan yang mungkin tidak dia minati.
Sarfraz

Tetapi ini sesuai dengan markupnya di mana dia belum menentukan nama kelas.
rahul

Anda harus membimbingnya di mana perbaikan mungkin terjadi :)
Sarfraz

kemungkinan alasan untuk tidak setuju adalah karena penanya tidak mencari apa yang telah Anda lakukan$('a','div.res')
Sarfraz

0

Alternatif

Menggunakan contoh dari Sarfraz di atas.

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

Untuk href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.