Мой код не работает внутри функции $ (document) .ready (). Может кто-нибудь помочь мне понять, почему? - PullRequest
Новая
       18

Мой код не работает внутри функции $ (document) .ready (). Может кто-нибудь помочь мне понять, почему?

0 голосов
/ 11 апреля 2019

Я пытаюсь научиться создавать слайд-шоу для проекта на работе.Я использую Jquery для хранения активного изображения в переменной, а затем использую метод next (), чтобы добавить активный класс к этому изображению и удалить активный класс из предыдущего изображения.

Теперь, когда все работает нормальнокогда у меня просто функция работает сама по себе.Однако в тот момент, когда я использую функцию document.ready (), она не работает.Мне удалось записать некоторые сообщения на консоль, но по какой-то причине я не смог запустить эту функцию.Каждый раз, когда консоль сообщает мне, что функция slideSwitch не была определена.

Может кто-нибудь помочь мне понять это?

Приветствия. 

$(document).ready(() => {
    function slideSwitch() {
        var $active = $('.active');
        var $next = $active.next();
        $next.addClass('active');
        $active.removeClass('active');
    }
    setInterval( "slideSwitch()", 5000 );
});
#slideshow {
    position: relative;
    height: 400px;  
    width: 600px;
    margin: 15% auto;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    height: 100%;
    width: 100%;
}
.active {
    z-index: 10;
}
.lastActive {
    z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slideshow">
  <img class="slide active" src="https://picsum.photos/200/300?image=0" alt="image of toscana, slideshow image 1" />
  <img class="slide" src="https://picsum.photos/200/300?image=1" alt="image of toscana, slideshow image 1" />
  <img class="slide" src="https://picsum.photos/200/300?image=2" alt="image of toscana, slideshow image 1" />
  <img class="slide" src="https://picsum.photos/200/300?image=3" alt="image of toscana, slideshow image 1" />
</div>

Когда слайд-шоу работает, оно в основном просто делает интервалы между изображениями, чтобы создать впечатление слайд-шоу, меняя значения z-index немного какколода карт.

1 Ответ

3 голосов
/ 11 апреля 2019

Вы передаете строку в setInterval, поэтому она оценивается в глобальной области видимости, а ваша функция ограничивается анонимной функцией, которую вы передаете ready (такне найден).

Никогда не передавать строку в setInterval, всегда передавать функцию. 

setInterval(slideSwitch, 5000 );
...