Jquery $(this) 在函数内部不起作用

Jquery $(this) not working inside function

我正在尝试使用 waypoints.js 在滚动点击元素时使元素淡入。

我有

$(document).ready(function(){

$('.card').waypoint(function(down) {
    console.log('hit element');
    $(this).addClass('card-fadeIn');
}, { offset: '100%' });

});

这样做的目的是添加 class 'card-fadeIn' 不透明度 1 和动画效果。

当我把它改成

$('.card').addClass('card-fadeIn');

它工作正常,但为每张卡片添加不透明度 1 class 并破坏淡入效果。我试图改用 $(this) 但它不会淡入,也不会在控制台中给出错误。有什么想法吗?

你必须使用

$(this.element)

在 Waypoint 处理程序中。所以,

$(this.element).addClass('card-fadeIn');

应该做你想做的。

$(this) 在 jQuery 回调中工作,因为 jQuery 是为以这种方式工作而设计的。然而,它并没有什么神奇之处,所以如果 this 没有引用 DOM 元素,你将得到一个 jQuery 对象,它不会做任何事情(而且它不会不要报告任何错误,因为,再一次,这就是 jQuery 的工作方式)。 Waypoint 库将 this 绑定到它自己的上下文对象,并公开对回调中涉及的 DOM 元素的引用作为 "element" 属性.

你试过了吗this.element?

$(document).ready(function(){

$('.card').waypoint(function(down) {
    console.log('hit element');
    $(this.element).addClass('card-fadeIn');
}, { offset: '100%' });

});