javascript - 单击链接的文本

Question

<ul class="Buttons">
    <li><a href="#" onclick="myFunc(); return false;">Accept</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Reject</a></li>
    <li><a href="#" onclick="myFunc(); return false;">On Hold</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Completed</a></li>
</ul>

在我的 script.js 中:

var myFunc = function () {
    // I want to get the Text of the link e.g. if the first list item link is
    // clicked, store "Accept" in a variable.
};

我怎样才能做到这一点？

Answer 1

您可以将当前链接作为参数传递给函数:

<ul class="Buttons">
    <li><a href="#" onclick="myFunc(this); return false;">Accept</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">Reject</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">On Hold</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">Completed</a></li>
</ul>

然后使用 innerHTML 属性获取里面的文本:

var myFunc = function (link) {
    alert(link.innerHTML);
};

---

更新:

我没有注意到您的问题实际上是用 jQuery 标记的。在这种情况下，我会建议您不引人注意地订阅点击处理程序:

<ul class="Buttons">
    <li><a href="#">Accept</a></li>
    <li><a href="#">Reject</a></li>
    <li><a href="#">On Hold</a></li>
    <li><a href="#">Completed</a></li>
</ul>

并在单独的 js 文件中:

$(function() {
    $('.Buttons a').click(function() {
        alert($(this).text());
        return false;
    });
});

---

更新 2:

有人问如果这些 anchor 是动态生成的，如何分配这些点击处理程序。因此，让我们假设您从以下标记开始:

<ul class="Buttons"></ul>

然后当某些事件发生时(点击或其他)，您动态添加一个 anchor :

$('<li/>', {
    html: $('<a/>', {
        href: '#',
        text: 'some text ....',
        click: myFunc
    })
}).appendTo('.Buttons');

你在某处定义了myFunc:

var myFunc = function() {
    alert($(this).text());
    return false;
}