如何循环浏览每个项目并返回每个实例(jQuery和scrollmagic)的相应值



我正在使用滚动魔术(很棒(来触发事件(.overnav(进入触发区域时。我有多个.overnavdivs,所以我使用一个.east((循环为每个实例发射。这有效,但是我还需要找到每个Div的高度并告诉滚动魔术以更新每个 unique unique 实例的 unique 持续时间。这一半有效...

下面的脚本返回每个.overnavdiv的高度,但它返回每个实例的nnavdiv高度。我不确定如何指定第一个.overnavdiv以使用第一个overnavdiv高度,第二个使用第二个。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);
    });   
});

如果这对其他任何人都有用,我想我已经弄清楚了。我需要将"此"进一步传递到嵌套函数中,因此我将其声明为变量并删除下游的每个循环。

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);
    });   
});

最新更新