$(this) 不适用于航路点答案

【问题标题】：$(this) does not work with waypoints$(this) 不适用于航路点
【发布时间】：2015-06-17 10:01:25
【问题描述】：

$(this) 属性不适用于 waypoints.js。

我的 Javascript：

$('.dipper').waypoint(function() {
    $(this).addClass('test');
}, { offset: '100%' });

奇怪的是，这段代码在我的网站上运行良好：

$('.dipper').waypoint(function() {
    $('.dipper').addClass('test');
}, { offset: '100%' });

在这种情况下，我使用.dipper 而不是$(this)。您可以在我的网站上查看：http://www.sq-media.de/weboptimierungen/rehfeld

【问题讨论】：

您忘记了函数中 .dipper 周围的引号。
@D4V1D 鉴于 OP 声明它适用于他的网站，我想这只是一个错字。
是的，我只是觉得值得一提，所以它不会导致其他 SO 用户认为这是错误（问题已被编辑）。
看看docs - 你应该在waypoints.js 中使用$(this.element)

标签： javascript jquery html this jquery-waypoints

【解决方案1】：

waypoint 方法不会在与父 jQuery 对象相同的上下文中运行。如果您需要这种行为，您可以使用 each 迭代 .dipper 元素：

$('.dipper').each(function() {
    var $this = $(this);
    $this.waypoint(function() {
        $this.addClass('test');
    }, { offset: '100%' });
});

【讨论】：

只是一个简单的问题：为什么影响$(this) 到$this？使用.each() 的重点不应该是有效地使用$(this) 吗？
@D4V1D 如果是这样，那么 OP 的第一个示例就可以了。 waypoint() 方法改变了this 的范围。
对。谢谢！

【解决方案2】：

根据航路点提供的文档，您将获得元素 ID

  this.element.id

所以你的函数看起来像 -

    $('.dipper').waypoint(function() {
        $('#' + this.element.id).addClass('test');
    }, { offset: '100%' });

参考来自http://imakewebthings.com/waypoints/guides/jquery-zepto/

注意：唯一的额外工作就是将 ID 添加到相应的元素。

【讨论】：