Javascript：这在 jquery click 函数中未定义

Question

$('.myclass').click(() => {
  let myvar = this;
  console.log(this.tagName);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<li><button class="myclass">click me</button></li>

控制台中的输出是

undefined

，但我期望按钮？我需要该按钮的 data-* 属性（您正在查看简化/最小化的代码），但我什至无法通过

this

获取该元素 - 为什么不呢？

Answer 1

在点击处理程序中

this

指的是窗口对象。所以

this.tagName

是未定义的。要访问该元素，您应该使用事件的目标。

$('.myclass').click((e) => {
  console.log(e.target.tagName);
})

如果你想访问数据属性，那么你可以用 jQuery 包装

e.target

并使用 data 函数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<li><button class="myclass" data-id="1">click me</button></li>

获取data-id的javascript代码是。

$('.myclass').click((e) => {
  console.log($(e.target).data('id'));
})