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.

ACP
sumber

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());
  });
});
Sarfraz
sumber
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"));
    });
});
GlenCrawford
sumber
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>

Josh Crozier
sumber
0

Kode diperbarui

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});
rahul
sumber
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);
  });
});
Jacob Ashcraft
sumber