使用$（this）

Question

如何将此从功能fun传递到jquery on（）函数？ 在$（...）。on（...）函数中使用this.panel。

在写这个问题的过程中，我找到了一个关于on（...，data，...）的答案，但是我想知道是否还有其他答案，因为我花了一些时间来寻找答案。 同样，当我用类似的问题搜索堆栈的主题时，却没有找到或看到类似的答案，因此我将其保存在这里，以防万一。

//Wrong code
function funWrong(selector) {
  this.selector = selector;
  this.panel = "#panel";

  $(selector).on("click", "a", function() {    
    $(this).addClass("w3-green"); //this is clicked link
    $(this.panel).addClass("w3-red"); //this is wrong
  });
}

//Working code:
function funOk(selector) {
  this.selector = selector;
  this.panel = "#panel";

  $(selector).on("click", "a", alias = this.panel, function() {    
    $(this).addClass("w3-green"); //this is clicked link
    $(alias).addClass("w3-red");
  });
}

//Use:
$(document).ready( function() {
  var f = new funWrong('#selector');
  var f = new funOk('#selector');
});

Answer 1

一种选择是使用箭头函数，以便保留外部作用域中的this上下文，并在点击处理程序中使用event.target来获取对clicked元素的引用：

$(selector).on("click", "a", (event) => {    
  $(event.target).addClass("w3-green");
  $(this.panel).addClass("w3-red");
});