使用JavaScript动态获取调用元素(锚)

Getting calling element (anchor) dynamically with JavaScript

本文关键字：元素 调用 JavaScript 动态 获取 使用      更新时间：2023-09-26

如何使用JavaScript获取锚标记的文本?我知道如何通过将ID附加到标签来做到这一点，但我想知道是否有办法使用"this"关键字来做到这一点。

示例HTML片段:

<ul>
    <li><a href="javascript:alertText(this);">Link One</a></li>
    <li><a href="javascript:alertText(this);">Link Two</a></li>
</ul>

JavaScript函数:

function alertText(callingElement) {
    alert(callingElement.text);
}

这不起作用(alert打印出"undefined")，因为" This "关键字似乎指向Window对象，而不是调用该函数的锚。

如果有必要，可以选择使用JQuery

您可以使用.innerHTML，但要传递this，您需要使用onclick属性。

<ul>
    <li><a href="#" onclick="alertText(this);">Link One</a></li>
    <li><a href="#" onclick="alertText(this);">Link Two</a></li>
</ul>

JS: 

function alertText(callingElement) {
    alert(callingElement.innerHTML);
}

或者您可以根据用户的浏览器使用.innerText或.textContent。

JS: 

function alertText(callingElement) {
    alert(callingElement.textContent || callingElement.innerText);
}

更新:

啊，等等，它是一个锚元素，所以它确实有一个.text属性，所以你的原始功能将工作(至少在支持HTML5的浏览器)。

JS: 

function alertText(callingElement) {
    alert(callingElement.text);
}

将其从href改为onclick:

<ul>
    <li><a href="#" onclick="alertText(this)">Link One</a></li>
    <li><a href="#" onclick="alertText(this)">Link Two</a></li>
</ul>

和你的JavaScript如下:

function alertText(callingElement) {
    alert(callingElement.textContent || callingElement.innerText);
}

示例:http://jsfiddle.net/manseuk/q8Q7A/1/

或内联jQuery -> 

<ul>
    <li><a href="#" onclick="alert($(this).text())">Link One</a></li>
    <li><a href="#" onclick="alert($(this).text())">Link Two</a></li>
</ul>

例子http://jsfiddle.net/manseuk/4uCBf/

您必须在onclick属性中调用该函数，像这样。

<ul>
    <li><a href="#" onclick="alertText(this);  return false;  ">Link One</a></li>
    <li><a href="#" onclick="alertText(this);  return false;  ">Link Two</a></li>
</ul>

你的代码

alertText = function(elem) {
    alert(elem.text);
}

查看此处的示例

内联事件处理程序很讨厌。因为您指出jQuery是一个选项，所以我很想这样做:

<ul class="alertList">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
</ul>

JS: 

$(function() { //document ready function
  $('.alertList').on('click', 'a', function(event) {
    event.preventDefault();
    alert($(this).text()); // jQuery
    // alert(this.text); // plain JS? Didn't actually test
  });
});
相关文章：