javascript - $(this) 在定义的点击事件中不起作用

Question

$(document).ready(() => {
  $(".tabs-item").click(() => {
    $(".tabs-item").removeClass("active");
      $(this).addClass("active"); //This line is not at all working..
    });
  });

$(this) 根本不起作用。我一直在尝试不同的方法。喜欢

$("tabs-item").click(() => {
  var x = $(this).attr("tab-data");
  console.log(x);
});

对于我尝试过的每个属性，我所得到的都是未定义的。

Answer 1

箭头函数保留外部上下文 - this 指的是定义箭头函数的上下文。将箭头函数替换为函数声明，让 jQuery 为函数绑定(bind)适当的上下文。

$("tabs-item").click(function(){
    var x = $(this).attr("tab-data");
    console.log(x);
});

或者使用箭头函数可以获取参数中的event参数并访问它的currentTarget属性。

$("tabs-item").click((event) => {
    var x = $(event.currentTarget).attr("tab-data");
    console.log(x);
});

函数声明方法更可取，因为没有为事件处理程序提供箭头函数。只需使用函数声明，它的上下文就会绑定(bind)到适当的函数。