Làm cách nào để lấy anchor text / href khi nhấp vào bằng jQuery?


113

Hãy xem xét tôi có một mỏ neo trông như thế này

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

LƯU Ý: Sẽ không có bất kỳ id hoặc lớp nào cho neo ...

Tôi muốn lấy href / text trong jQuery onclickcủa anchor đó.

Câu trả lời:


242

Lưu ý: Áp dụng lớp học info_linkcho bất kỳ liên kết nào bạn muốn lấy thông tin từ đó.

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

Đối với href:

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

Đối với Văn bản:

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

.

Cập nhật dựa trên câu hỏi Chỉnh sửa

Bạn có thể lấy chúng như thế này ngay bây giờ:

Đối với href:

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

Đối với Văn bản:

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

1
Điều này sẽ bị phá vỡ nếu một phần tử khác có liên kết tên lớp. Cũng tốt hơn để chỉ định bộ chọn thẻ.
rahul

@rahul: Thật là buồn cười, nó sẽ không, linklớp học phải dành cho các liên kết cụ thể mà anh ấy muốn lấy thông tin.
Sarfraz

Nhưng điều gì sẽ xảy ra nếu đánh dấu sau ở đó,<div class='link' />
rahul

@rahul: nó đang trở nên hài hước trở lại, anh ấy có thể đặt cho các liên kết của mình bất kỳ tên độc đáo nào.
Sarfraz

bạn có thể sử dụng this.hash thay vì $ (this) .attr ('href')
meo

6

Đã chỉnh sửa để phản ánh cập nhật cho câu hỏi

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

mà sẽ nhắm mục tiêu tất cả các liên kết ngay cả những ông có thể không được quan tâm
Sarfraz

4

Không có jQuery:

Bạn không cần jQuery khi nó quá đơn giản để thực hiện việc này bằng JavaScript thuần túy. Đây là hai tùy chọn:

  • Phương pháp 1 - Lấy giá trị chính xác của hrefthuộc tính:

    Chọn phần tử và sau đó sử dụng .getAttribute()phương pháp.

    Phương thức này không trả về URL đầy đủ, thay vào đó, nó truy xuất giá trị chính xác của hrefthuộc tính.

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


  • Phương pháp 2 - Truy xuất đường dẫn URL đầy đủ:

    Chọn phần tử và sau đó chỉ cần truy cập thuộc hreftính .

    Phương thức này trả về đường dẫn URL đầy đủ.

    Trong trường hợp này: http://stacksnippets.net/relative/path.html.

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


Như tiêu đề của bạn ngụ ý, bạn muốn nhận được hrefgiá trị khi nhấp chuột. Chỉ cần chọn một phần tử, thêm trình nghe sự kiện nhấp chuột và sau đó trả về hrefgiá trị bằng cách sử dụng một trong các phương pháp nói trê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

Đã cập nhật mã

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

mà sẽ nhắm mục tiêu tất cả các liên kết ngay cả những ông có thể không được quan tâm.
Sarfraz

Nhưng đây là theo đánh dấu của anh ấy trong đó anh ấy không chỉ định tên lớp.
rahul

Bạn nên hướng dẫn anh ta nơi sự cải thiện có thể :)
Sarfraz

có thể lý do để bỏ phiếu xuống có thể là người hỏi mà không tìm kiếm những gì bạn đã làm với$('a','div.res')
Sarfraz

0

Thay thế

Sử dụng ví dụ từ Sarfraz ở trên.

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

Đối với href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.