如何在 jQuery 函数的回调中引用元素？

Question

假设我有一个这样的 jQuery 函数：

$.fn.foo = function(param, callback) {
    if (typeof callback === 'function') {
        callback(params);
    }
}

然后在像这样的元素上调用函数时：

$('table tr').foo(bar, function(param) {
    console.log($(this)); // this needs to reference 'table tr'
});

在这种情况下，我注意到 this 引用了 window。您将如何引用正在调用该函数的元素而不将其作为回调内部的参数传递？

Answer 1

为此，您可以使用 call() 设置您调用的函数的范围。

另请注意，您的 $.fn.foo 函数定义需要两个参数，而不是一个。我使用第一个作为类名来应用到这个例子中的元素。

$.fn.foo = function(params, callback) {
  if (typeof callback === 'function') {
    callback.call(this, params);
  }
}

$('table tr').foo('foo', function(classname) {
  $(this).addClass(classname);
});

.foo { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Foo</td>
  </tr>
</table>

如何在 jQuery 函数的回调中引用元素？

How to reference element in a jQuery function's callback?

javascript

jquery

function

this