javascript - 事件处理程序错误 : "this.data() is not a function"

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

但后来我得到:

Uncaught TypeError: this.data is not a function

如果我这样做:

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') );
});

或者，您可以跳过 jQuery 包装器并直接访问数据属性:

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

const my_links = $('#list a');

my_links.on('click', function() {
  console.log( 'jQuery: ' + $(this).data('info') );
  console.log( 'Vanilla JS: ' + this.dataset.info );
});

a {
  cursor: pointer;
  border-bottom: 1px solid blue;
}

li {
  line-height: 2em;
}
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="list">
    <li><a data-info="link1">link 1</a></li>
    <li><a data-info="link2">link 2</a></li>
    <li><a data-info="link3">link 3</a></li>
    <li><a data-info="link4">link 4</a> </li>
</ul>