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：

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

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

然后当某些事件发生时（单击或其他），您可以动态添加锚点：

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

您在某处定义了myFunc：

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

Answer 2

因为你似乎在使用jQuery ......

$("ul.buttons > li > a").click(function () {
  alert( $(this).text() );

  myFunc(this);
  return false;
});

... 请删除这些onclick处理程序。 ;）

Answer 3

    $('.Buttons li a').click(function(event) {
       var myVariable = $(this).text();
        alert(myVariable);
        event.preventDefault();
    });

Answer 4

$(function(){ $('.Buttons').click(function(){ alert($(this).html(); }) })

Answer 5

如果您正在使用jQuery，那么您可以绑定到这样的元素：

//wait for document.ready to fire
$(function () {

    //find the links in the `.Button` list and bind a click event handler to them
    $('.Buttons').find('a').on('click', function () {

        //alert the text of the clicked element
        alert($(this).text());

        //prevent the normal behavior of the link, also stop the propagation of the event so no other elements fire event handlers for this event
        return false;
    });
});

请注意，.on()是jQuery 1.7中的新功能，在这种情况下与使用.bind()相同：http://api.jquery.com/on

您的HTML内不需要任何JS：

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

Answer 6

$(this).text()应该适合你。

点击链接的文字

6 个答案: