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绑定函数的适当上下文。

$("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);
});

更优选函数声明方法，因为没有为事件处理程序提供箭头函数。只需使用函数声明，它的上下文将绑定到适当的。

Answer 2

为什么不这样做？

$(document).ready(function(){

    $(".tabs-item").click(function(e){
       $(".tabs-item").removeClass("active");
       $(this).addClass("active");
    });

});

我认为没有特别需要使用胖箭头=>函数表示法。

$（this）在定义的click事件中不起作用

2 个答案: