如何在 jQuery 悬停事件处理程序中使用 $(this)
How do I use $(this) in a jQuery hover event handler?
我在div中隐藏了一个无序列表。div 有一个类".feed-label",当div 悬停在上面时,我目前正在显示 ul。
我的问题是,当悬停在上面时,所有其他元素也会显示,我只想显示悬停在上面的元素。
我不知道如何使用$(这个)。
$('.feed-label').hover(function() {
$('.article-interactive-buttons').toggleClass('hide');
});
事件
处理程序上下文中的this
关键字是指悬停的元素,即.feed-label
元素。您应该通过将元素传递给 jQuery 构造函数来创建 jQuery 对象,然后使用 find
/children
方法来选择目标后代。
$('.feed-label').hover(function() {
$(this).find('.article-interactive-buttons').toggleClass('hide');
});
您还可以使用$(selector, context)
语法,该语法的工作方式与上面的代码片段类似:
$('.feed-label').hover(function() {
$('.article-interactive-buttons', this).toggleClass('hide');
});
如果 ul 在div 中,并且您想采用仅使用 css 的解决方案,您可以这样做:
.feed-label:hover .article-interactive-buttons {
display: none;
}
.feed-label:hover .article-interactive-buttons {
display: block;
}
你可以试试:
$('.feed-label').hover(function() {
$(this).closest('.article-interactive buttons').toggleClass('hide');
}
相关文章:
- $(this.el).find()在事件处理程序中工作,而不是在初始化函数(主干.js)中工作
- extjs中事件处理程序函数中的THIS上下文
- 为什么 DOM 事件处理程序中的嵌套函数会修复“this”绑定
- 在命名处理程序函数中使用 $(this) & event
- `expressJS路由处理程序中未定义this
- '中的格式化程序;带负堆叠的条形图':this.point.stackTotal的值错误(bug?)
- jQuery:将 $(this) 传递给命名函数事件处理程序
- 从事件处理程序回调调用的函数中' this '的值
- Es6类和"this"使用事件处理程序
- 如何获取"this"的当前实例?文件在谷歌应用程序脚本
- 闭包内部的Javascript事件处理程序“this”绑定不起作用
- 避免var _this = this;在编写jQuery事件处理程序时
- 在点击处理程序中使用' this '关键字从中间人函数传入
- 如何在事件处理程序中访问“this”
- 事件处理程序错误:“this.data()不是一个函数”
- Highcharts工具提示格式化程序只显示this.point.name中的前8个字符
- 如何在不修改“this”的情况下包装现有事件处理程序
- 试图使用“this”;而不必使用“that”将函数作为参数传递给jquery委托事件处理程序
- Java小程序:调用JavaScript-JSObject.getWindow(this)总是返回null
- 如何在 jQuery 悬停事件处理程序中使用 $(this)