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