วิธีรับ anchor text / href เมื่อคลิกโดยใช้ jQuery


113

คิดว่าฉันมีจุดยึดที่มีลักษณะเช่นนี้

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

บันทึก:จะไม่มี id หรือคลาสสำหรับจุดยึด ...

ฉันต้องการรับ href / text ใน jQuery onclickของจุดยึดนั้น

คำตอบ:


242

หมายเหตุ:ใช้ชั้นเรียนinfo_linkกับลิงก์ใดก็ได้ที่คุณต้องการรับข้อมูล

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

สำหรับ href:

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

สำหรับข้อความ:

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

.

อัปเดตตามคำถามแก้ไข

คุณจะได้รับแบบนี้ตอนนี้:

สำหรับ href:

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

สำหรับข้อความ:

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

1
สิ่งนี้จะพังหากองค์ประกอบอื่นมีลิงก์ชื่อคลาส ควรระบุตัวเลือกแท็กด้วย
rahul

@rahul: มันตลกดีมันไม่ได้linkชั้นควรจะเป็นลิงค์เฉพาะที่เขาต้องการรับข้อมูลจาก
Sarfraz

แต่จะเกิดอะไรขึ้นถ้ามีมาร์กอัปต่อไปนี้<div class='link' />
rahul

@rahul: มันกลายเป็นเรื่องตลกอีกครั้งเขาสามารถตั้งชื่อเฉพาะให้กับลิงค์ได้
Sarfraz

คุณสามารถใช้ this.hash แทน $ (this) .attr ('href')
meo

6

แก้ไขเพื่อแสดงการอัปเดตของคำถาม

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

ซึ่งจะกำหนดเป้าหมายลิงก์ทั้งหมดแม้แต่ลิงก์ที่เขาอาจไม่สนใจ
Sarfraz

4

ไม่มี jQuery:

คุณไม่จำเป็นต้องใช้ jQuery เมื่อมันง่ายมากที่จะทำโดยใช้ JavaScript บริสุทธิ์ มีสองตัวเลือกดังนี้

  • วิธีที่ 1 - ดึงค่าที่แน่นอนของhrefแอตทริบิวต์:

    เลือกองค์ประกอบจากนั้นใช้.getAttribute()วิธีการ

    วิธีนี้จะไม่ส่งคืน URL แบบเต็ม แต่จะดึงค่าที่แน่นอนของhrefแอตทริบิวต์แทน

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


  • วิธีที่ 2 - ดึงเส้นทาง URL แบบเต็ม:

    เลือกองค์ประกอบและจากนั้นก็เข้าสู่สถานที่ให้บริการhref

    วิธีนี้ส่งคืนเส้นทาง URL แบบเต็ม

    ในกรณีนี้: http://stacksnippets.net/relative/path.html.

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


ตามที่ชื่อของคุณมีความหมายคุณต้องการได้รับhrefมูลค่าเมื่อคลิก เพียงแค่เลือกองค์ประกอบเพิ่มตัวฟังเหตุการณ์การคลิกแล้วส่งคืนhrefค่าโดยใช้วิธีการใดวิธีการหนึ่งที่กล่าวมา

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

อัปเดตรหัส

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

ซึ่งจะกำหนดเป้าหมายลิงก์ทั้งหมดแม้แต่ลิงก์ที่เขาอาจไม่สนใจก็ตาม
Sarfraz

แต่นี่เป็นไปตามมาร์กอัปของเขาซึ่งเขาไม่ได้ระบุชื่อชั้นเรียน
rahul

คุณควรแนะนำเขาว่าสามารถปรับปรุงได้ที่ไหน :)
Sarfraz

เหตุผลที่เป็นไปได้สำหรับการโหวตลงอาจเป็นเพราะผู้ถามไม่ได้มองหาสิ่งที่คุณทำกับ$('a','div.res')
Sarfraz

0

ทางเลือก

ใช้ตัวอย่างจาก Sarfraz ด้านบน

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

สำหรับ href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.