Question

我有一个HTML列表，其中每个链接都带有data-…个属性：

<ul id="list">
    <li><a data-info="link1"> **** </a></li>
    <li><a data-info="link2">****</a></li>
    <li><a data-info="link3">**** </a></li>
    <li><a data-info="link4">****</a> </li>
</ul>

每次点击链接时，我都需要收到链接的data-info值。所以我想到这样的事情：

var my_links = $('#list').find('a');

my_links.on('click', function(){
     console.log(this.data(info));
});

但后来我得到了：

未捕获的TypeError：this.data不是函数

如果我这样做：

var my_links = $('#list').find('a');

my_links.on('click', function(){
  console.log(this);
});

我获得了每个链接的完整HTML代码，例如：

<a data-info="link1"> **** </a>

为什么两件事都发生了，我该如何解决？

Answer 1

data()是一个jQuery方法，而不是本机DOM对象的方法。

this将是被点击的<a>元素 - 本机DOM对象（HTMLAnchorElement）。给它一个jQuery包装器来调用jQuery方法：

my_links.on('click', function() {
  console.log( $(this).data('info') );
});

（并注意您没有info变量 - 您正在寻找字符串 'info'访问的数据

Answer 2

使用$（this）.data（）而不是this.data（）。

var my_links = $('#list').find('a');
    my_links.on('click', function(){
        console.log($(this).data());
    });

在此处查找有关jQuery $（this）的更多信息：jQuery: What's the difference between '$(this)' and 'this'?

事件处理程序出错：“this.data（）不是函数”

2 个答案: