javascript - 当某张幻灯片在 fullpage.js slider 中具有事件类时，如何隐藏元素？

Question

我正在使用 fullpage.js 并且页面上有一个固定元素需要根据事件的幻灯片进行更改。所以基本上，如果幻灯片 1 处于事件状态，则会显示固定元素 1。如果幻灯片 2 处于事件状态，则显示固定元素 2，依此类推。什么都不适合我，我也不知道为什么。

$('.fp-slidesNav a').click(function() {
        var activeSlide = $('.slide.active');
        if ((activeSlide).hasClass('slide1')) {
            $('fixedelement1').show();
            $('fixedelement1').siblings().hide();
        }
        else if ((activeSlide).hasClass('slide2')) {
            $('fixedelement2').show();
            $('fixedelement2').siblings().hide();
        }
       else if {
         ...
       }
});

有可能是我的类名有误，或者我的所有代码中某处有拼写错误，但我不这么认为，因为我对所有内容都进行了多次检查。这很奇怪，因为我可以做到

 $('a').click(function() {
       alert('hello');
});

当我单击 .fp-slidesNav anchor 时没有收到任何警报，但单击另一个随机链接时我收到了警报。

Answer 1

使用 afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

在滚动结束后加载一个部分的幻灯片后触发的回调。参数:

anchorLink: anchorLink corresponding to the section.

index: index of the section. Starting from 1.

slideAnchor: anchor corresponding to the slide (in case there is)

slideIndex: index of the slide. Starting from 1. (the default slide doesn't count as slide, but as a section)

如果没有为幻灯片定义 anchorLinks，则 slideIndex 参数将是唯一要使用的参数。示例:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);

        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }

        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});