javascript - 当 div 有多个类时更改文本

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