当某张幻灯片的 class 在 fullpage.js 滑块中处于活动状态时，如何隐藏元素？

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

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

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

当我点击 .fp-slidesNav 一个锚点时没有收到任何警报，但点击另一个随机 link 我收到了警报。

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

Answer 2

我认为@KishoreSahas 是对的。但几乎没有变化/即兴创作

假设您在页面上的固定元素类似于以下内容。可能是带有子 div 标签

的部分标签

<ul id="fixedelement">
  <li class="slide firstPage active"></li>
  <li class="slide secondPage "></li>
  <li class="slide thirdPage "></li>
  <li class="slide fourthPage "></li>

</ul>

您的滑块代码需要如下所示

$('#myslider').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage']
  afterSlideLoad: function(anchorLink, index){
    $('#fixedelement .slide').each(function () {$(this).hide();}
    $('#fixedelement .' + anchorLink).each(function () {$(this).show();}
  }
});

我以前从未使用过fullpage.js，所以上面的代码没有经过测试。

当某张幻灯片的 class 在 fullpage.js 滑块中处于活动状态时，如何隐藏元素？

How do I hide an element when a certain slide has a class of active in fullpage.js slider?

javascript

jquery

fullpage.js