每个循环和 $(this).find 的 ScrollMagic答案

【问题标题】：ScrollMagic with each loop and $(this).find每个循环和 $(this).find 的 ScrollMagic
【发布时间】：2017-09-08 10:50:29
【问题描述】：

我正在尝试使用 ScrollMagic 为我的 h1 标签中的几个 span 元素设置动画。

我们的目标是遍历每个 h1（第一个除外），找到带有 .msk 类的跨度，并为其子级添加另一个类（.is-visible）。

我已经设置了一个 each 循环，但我不知道如何正确地将 $(this) 与另一个选择器结合起来。

我的代码如下所示：

$('h1:not(:first)').each(function() {

 var msk = $(this).find('.msk span');
 console.log(msk);

 var h1Scene = new ScrollMagic.Scene({
  triggerElement: this,
  triggerHook: 0.7,
  reverse: false,
 })
 .addIndicators({
   name: "H1"
 })
 .setClassToggle(msk, 'is-visible')
 .addTo(controller)
});

我已经做了一些研究，但我仍然无法弄清楚它是如何工作的。

【问题讨论】：

你看我的回答了吗？
@xxxmatko 抱歉完全忘记回复了。它刚刚解决了。非常感谢！

标签： jquery loops each scrollmagic

【解决方案1】：

根据文档，setClassToggle 函数的第一个参数应该是以一个或多个元素或应该修改的 DOM 对象为目标的选择器。

但是当您调用var msk = $(this).find('.msk span'); 时，您将拥有存储在msk 变量中的jQuery 对象。所以这应该是一个无效的调用

.setClassToggle(msk, 'is-visible')

尝试改为调用它

.setClassToggle(msk[0], 'is-visible')

它将使您可以访问由 jQuery 选择的纯 DOM 元素。

【讨论】：

抱歉，可能不清楚，但我想选择具有 .msk 类的父跨度元素的所有跨度（子级）。我认为问题在于 .setClassToggle 方法和内部的错误组合。