Question

我如何使用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);
}

这不起作用（警告打印出“未定义”），因为“this”关键字似乎指向Window对象而不是调用该函数的锚。

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

Answer 1

您可以使用.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);
}

Answer 2

将其从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 - ＆gt;

<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/

Answer 3

你必须在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);
}

检查example here。

Answer 4

内联事件处理程序很讨厌。既然你表示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
  });
});

使用JavaScript动态调用元素（锚点）

4 个答案: