Question

我尝试创建一个功能，可以在特定幻灯片处于活动状态时更改后退和前进箭头的文本。我使用fullpage.js创建幻灯片。

幻灯片的格式如下：

<div class="slide start table active">slide content </div>
<div class="slide doelwitten table">slide content </div>
<div class="slide strategie table">slide content </div>
<div class="slide troepen table">slide content </div>

每当幻灯片处于活动状态时，会将活动类分配给幻灯片，如下所示：

<div class="slide start table active">slide content </div>

这是我试图实现该结果的代码

if ( $('.slide').hasClass('doelwitten') && $('.slide').hasClass('active')) {
             $('.controlArrow.prev p').text('link1')
             $('.controlArrow.next p').text('link2')
        }

if ( $('.slide').hasClass('start') && $('.slide').hasClass('active')) {
             $('.controlArrow.prev p').text('link2')
             $('.controlArrow.next p').text('link3')
        }

但是，当我测试代码时，只执行第一个功能，并且当特定幻灯片变为活动状态时链接的文本不会改变。

我对jquery很新，所以任何建议都会受到赞赏。我一直在寻找3小时，所以我想是时候寻求帮助了。）

提前致谢！

Answer 1

您必须使用插件回调来执行此操作，例如afterSlideLoad。

$('#fullpage').fullpage({
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {

        var currentActiveSlide = $('.section').eq(index - 1).find('.slide').eq(slideIndex);

        if (currentActiveSlide.hasClass('start')) {
            $('.controlArrow.prev p').text('link2')
            $('.controlArrow.next p').text('link3')
        }
    }
});

Live demo

div有多个类时更改文本

1 个答案: