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

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

<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);
}

在这里查看示例 。

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
  });
});