Question

当div（.overNav）进入触发区域时，我正在使用滚动魔术（超赞）来触发事件。我有多个.overNav div，因此我使用.each（）循环为每个实例触发。那行得通，但是我还需要找到每个div的高度，并告诉滚动魔术为每个 unique 实例更新 unique 持续时间。这个中途有效...

下面的脚本返回每个.overNav div的高度，但是它返回每个实例的所有overNav div高度。 我不确定如何指定第一个.overNav div使用第一个overNav div高度，第二个.overNav div使用第二个，等等，等等。 console.log我m使用两个实例的两个实例的高度。该脚本仅使用 last overNav高度而不是正确的高度来更新持续时间。

所以我在每个循环中，并且希望该循环中的每个函数都将返回该特定实例的信息。我究竟做错了什么？我还没有受过训练，基本上是通过这些事情来闯关。这个让我难过。

jQuery(document).ready(function ($) {   
//Init ScrollMagic
var controller = new ScrollMagic.Controller(); 
//Scene 3 Loop - send .underNav objects under the sidenav
    $('.overNav').each(function() {
        // build a scene
        var overNavScene = new ScrollMagic.Scene({
            triggerHook: '.25',
            reverse: true,
            triggerElement: this
        })
        .setClassToggle("#sidenav", "fade-out")
        //get height of each overnav on enter
        .on("enter", function() {
            $('.overNav').each(function() {
                var overNavHeight = $(this).height()   
                overNavScene.duration(overNavHeight);
                console.log(overNavHeight);
             });
        }) 
        .addTo(controller);
    });   
});

Answer 1

万一这对其他人有用，我想我想通了。我需要将“ this”进一步传递给嵌套函数，因此我在变量中声明了它，并删除了下游的附加每个each循环。

jQuery(document).ready(function ($) {   
//Init ScrollMagic
var controller = new ScrollMagic.Controller(); 
//Scene 3 Loop - send .underNav objects under the sidenav
    var $thisss = this; // THIS was the key
    $('.overNav').each(function() {
        // build a scene
        var overNavScene = new ScrollMagic.Scene({
            triggerHook: '.25',
            reverse: true,
            triggerElement: $thisss
        })
        .setClassToggle("#sidenav", "fade-out")
        //get height of each overnav on enter
        .on("enter", function() {
            $('.overNav').each(function() {
                var overNavHeight = $($thisss).height()   
                overNavScene.duration(overNavHeight);
                console.log(overNavHeight);
             });
        }) 
        .addTo(controller);
    });   
});

如何遍历每个项目并为每个实例（jquery和scrollmagic）返回相应的值

1 个答案: