Question

我有以下代码

<div class="header"> 
  <div class="one_cont">Div one!</div>  
</div>

<div class="project" id="trigger1">
  <div class="text" id="anim1">Div two!</div>
</div>

<div class="project" id="trigger2">
  <div class="text" id="anim2">Div two!</div>
</div>

我试图在每个div上使用每个循环，但我不确定如何定位每个项目的内部div

// Init ScrollMagic
$(document).ready(function() {
    var controller = new ScrollMagic.Controller();
    // Create a Scene
    $(".project").each(function() {
        var ourScene = new ScrollMagic.Scene({
            triggerElement: this,
            triggerHook: 0.25
        })
        .setClassToggle($(this).next(), "fade-in")
        .addIndicators()
        .addTo(controller);
    });
});

我尝试使用

.setClassToggle( $(this).next(),

但这似乎不起作用。这样做的正确方法是什么？

Answer 1

您需要使用.children()或.find()，因为元素div是孩子，方法.next()会立即跟随兄弟，因此无效。

.setClassToggle( $(this).children("div"), "fade-in")

根据Docs

一个选择器，用于定位一个或多个元素或应该被修改的DOM对象。

它接受一个DOM元素或选择器，你需要传递DOM元素，因此使用

.setClassToggle( $(this).children("div")[0], "fade-in")

Answer 2

使用children()代替next()来定位内部div

.setClassToggle( $(this).children("div"), "fade-in")

如何在JavaScript中定位下面div的子项

2 个答案: