我的代码在$（document）.ready（）函数中不起作用。 谁能帮我理解原因？

Question

I'm trying to learn how to create slideshows for a project at work. I'm using Jquery to store the active image in a variable and then using the next() method to append the active class to that image and remove the active class from the previous image.

Now that all works fine when I just have the function running on it's own. The moment I use a document.ready() function however, it doesn't work. I was able to log some messages to the console within it, but for some reason I couldn't run this function. Each time the console tells me that the slideSwitch function hasn't been defined.

Can anyone help me understand this?

Cheers.

 $(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> 

When the slideshow works it basically just times out the images to create the impression of a slideshow, swapping the z-index values a bit like a deck of cards.

Answer 1

You are passing a string to setInterval , so it is evaluated in the global scope and your function is scoped to the anonymous function you pass to ready (so it isn't found).

Never pass a string to setInterval , always pass a function.

setInterval(slideSwitch, 5000 );