如何使用$(this）来动态检索锚点标记的title属性

How to use $(this) to dynamically retrieve the title attribute of an anchor tag

本文关键字：属性 title 检索 动态 何使用 this      更新时间：2023-09-26

我正在尝试为我的网站开发一个朋友标签系统。

我有一个锚标记围绕着我的div标记，它有一个标题。我试图使用以下代码从中检索标题，但结果总是未定义的。

<a href="#" class="add-link" onclick="addFunc()" title="test1">
    <div class="divclass">
        blabla    
    </div>
</a>

function addFunc(){
    var username = $(this).attr('title');
    $('#content').html(username);
}

http://jsfiddle.net/0f4mun8r/3/

知道为什么吗？

谢谢！

您有三个问题。

第一：

您已经将JS Fiddle配置为将所有代码封装在一个onload处理程序中。这将停止函数作为全局函数，因此当您调用addFunc时，将找不到它。

第二：

您正在调用jQuery，但尚未包含jQuery库。

第三：

this的值取决于调用函数的方式。

当调用onclick函数时，this是元素。

当调用addFunc时（如果您修复了其他问题），由于您没有指定上下文，因此this是window（默认对象）。

不要使用内部事件属性。使用JavaScript绑定事件处理程序。

jQuery(".add-link").on('click', addFunc);

如果您使用jQuery，那么请在您的页面中包含库。

您的fiddle中没有包含jquery。此外，如果您使用jquery将您的事件与它绑定，如下所示：

$(".add-link").on("click", function addFunc(){
    var username = $(this).attr('title');
    $('#content').html(username);
});

http://jsfiddle.net/0f4mun8r/4/

尝试用类名调用它

$('.add-link').click(function() {
    var username = $(this).attr('title');
    alert(username);
    $('#content').html(username);
});
相关文章：