Изменить текст, когда 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')
        }
    }
});

Живая демо