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

【问题标题】：Jquery $(this) not working inside functionJquery $(this) 在函数内部不起作用
【发布时间】：2015-08-12 14:35:51
【问题描述】：

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

我有

$(document).ready(function(){

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

});

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

当我把它改成

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

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

【问题讨论】：

你能记录下这个函数里面是什么吗？
this 可能与您的想法大不相同。
this 可能不再是 jQuery 对象范围了。在之前的某个变量中保存this。
我认为，因为在这种情况下this 是waypoint。控制台日志this 检查那是什么。尝试将元素传递给该函数。
是的，控制台日志给了我元素和其他一些选项

标签： javascript jquery css jquery-waypoints

【解决方案1】：

你必须使用

$(this.element)

在 Waypoint 处理程序中。所以，

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

应该做你想做的。

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

【讨论】：

this.element 为其添加了正确的 css，但是它将动画应用于每个 .card 元素，我只想让它在向下滚动时触发。
@ServerSideSkittles 我不明白你的意思。您还没有发布您的 HTML，我也不知道您希望页面做什么。你以前用过 Waypoint 吗？
第一次使用航点。我有这个主题ashobiz.asia/flatmania151/theme/index.html 并想在另一个主题上复制效果。据我所知，主题使用了这种确切的方法。我已经一块一块地删除了另一个js，它使用的只是css不透明度、jquery航点和类似于我自己的自定义函数。

【解决方案2】：

你试过this.element吗？

$(document).ready(function(){

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

});

【讨论】：