不确定 $(this) 指向的内容

Posted 2023-05-09

【中文标题】不确定 $(this) 指向的内容

【英文标题】：Not Sure About What $(this) points to here

【发布时间】：2015-12-18 16:58:44

【问题描述】：

关于在 JQUery 中使用 $(this) 的问题。

如果你有类似的东西：

$('li.biz').mouseover(function()
  $(this).find('a.invisB').slideDown();
);

$(this) 会选择什么？它是选择鼠标悬停的单个 li.biz 元素，然后向下滑动适当的后代元素，还是会在鼠标悬停事件发生时选择具有 biz 类的所有 li 元素？

【问题讨论】：

我刚刚在 Google 上搜索了 "jQuery this" 并看到了这篇文章，它解释得非常好：remysharp.com/2007/04/12/jquerys-this-demystified

【参考方案1】：

在这种情况下：

$('li.biz').mouseover(function()
  $(this).find('a.invisB').slideDown();
);

$(this) 指的是 li.biz，即当前悬停的“li.biz”。

它被设置为使用类'invisB'在其中找到一个锚标记（链接）并应用函数slideDown();给它。

这是一个小提琴，一个简单的例子：https://jsfiddle.net/d9rbrqqd/

【参考方案2】：

来自.mouseover(function) 文档：

这个方法是.on("mouseover", handler)的快捷方式

来自.on 文档：

当 jQuery 调用处理程序时，this 关键字是对 传递事件的元素；对于直接绑定的事件 这是附加事件并用于委托的元素 events 这是一个匹配selector的元素。

换句话说，this 只是 DOM 元素。在您的场景中，这将是触发事件的li.biz。由于this 只是一个 DOM 元素，因此您需要将其包装 ($(this)) 以便在其上调用 jQuery 函数。

【讨论】：

好的，谢谢。这几乎是我的想法，但感谢您解释处理程序的工作方式以及选择了哪个元素。