我的代码在 $(document).ready() 函数中不起作用。谁能帮我理解为什么？答案

【问题标题】：My code doesn't work within a $(document).ready() function. Can anyone help me understand why?我的代码在 $(document).ready() 函数中不起作用。谁能帮我理解为什么？
【发布时间】：2019-04-11 14:37:29
【问题描述】：

我正在尝试学习如何为工作中的项目创建幻灯片。我正在使用 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 值有点像一副纸牌。

【问题讨论】：

标签： javascript jquery frontend slideshow

【解决方案1】：

您正在将 字符串 传递给 setInterval，因此它在 global 范围内进行评估，并且您的函数的范围限定为您传递给 ready 的匿名函数（所以没有找到）。

从不将字符串传递给setInterval，始终传递函数。

setInterval(slideSwitch, 5000 );

【讨论】：