时间戳

首页 > 解决方案 > 使用 $(this) 将 this 传递给 jquery on() 函数

javascript - 使用 $(this) 将 this 传递给 jquery on() 函数

问题描述

如何将这个从函数 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');
});

标签： javascriptjquery

解决方案

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

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

推荐阅读