javascript - Jquery $(this) 不在函数内工作

Question

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

我有

$(document).ready(function(){

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

});

它的作用是添加类“card-fadeIn”，其不透明度为 1，并且动画效果更轻松。

当我将其更改为

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

它工作正常，但为每个卡片类别添加了不透明度 1 并破坏了淡入淡出效果。我试图使用 $(this) 代替，但它不会淡出，也不会在控制台中给出错误。有什么想法吗？

Answer 1

你必须使用

$(this.element)

在 Waypoint 处理程序中。所以，

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

应该做你想做的事。

$(this) 在 jQuery 回调中工作，因为 jQuery 是为以这种方式工作而设计的。然而，它并没有什么神奇之处，所以如果 this 不引用 DOM 元素，您将得到一个不会执行任何操作的 jQuery 对象(并且不会报告任何错误，因为，这就是 jQuery 的工作原理)。 Waypoint 库将 this 绑定(bind)到它自己的上下文对象，并将回调中涉及的 DOM 元素的引用公开为“element”属性。