如何使用 jQuery 在点击时获取锚文本/href？

Question

考虑我有一个看起来像这样的锚点

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

注意：锚点不会有任何id或类...

我想在jQuery onclick。

Answer 1

注意：将 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());
  });
});

Answer 2

进行编辑以反映问题的更新

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

Answer 3

没有 jQuery：

当使用纯 JavaScript 来完成此操作非常简单时，您需要 jQuery。这里有两个选项：

• 方法 1 - 检索 href 属性的准确值：

  选择元素，然后使用 .getAttribute () 方法。

  此方法不返回完整的 URL，而是检索 href 属性的确切值。

  var 锚点 = document.querySelector('a'),
      url =anchor.getAttribute('href');
  
  警报（网址）；

---

• 方法 2 - 检索完整 URL 路径：

  选择该元素，然后只需访问 href 属性。

  此方法返回完整的 URL 路径。

  在本例中：http://stacksnippets.net/relative/path.html。

  var 锚点 = document.querySelector('a'),
      url = 锚点.href;
  
  警报（网址）；

---

正如您的标题所暗示的，您希望在点击时获取 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>

Answer 4

更新代码

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

Answer 5

替代方案

使用上面 Sarfraz 的示例。

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

对于链接：

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});