javascript - 我的代码在 $(document).ready() 函数中不起作用。谁能帮我理解为什么?
问题描述
我正在尝试学习如何为工作中的项目创建幻灯片。我正在使用 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 值有点像一副纸牌。
解决方案
您正在将一个字符串传递给setInterval
,因此它在全局范围内进行评估,并且您的函数的范围仅限于您传递给的匿名函数ready
(因此找不到它)。
永远不要将字符串传递给setInterval
,始终传递函数。
setInterval(slideSwitch, 5000 );
推荐阅读
- c# - char 到 int 比较在 VS 中的代码和调试器/监视窗口中表现不同
- c# - C# SynchronizationContext.Send 暂停 UI 线程
- mysql - 如何获取最后一行 MySQL
- c# - 将代码添加到 Global.asax 后,如何解决从商店提供商的数据读取器中发生的错误?
- javascript - TypeError:无法读取未定义的属性“0” - Google 应用脚本
- apache-camel - Camel FTP中的密钥交换协议
- python - 当唯一的工人死亡时,是否有可能让“uwsgi”死亡?
- azure-active-directory - 使用查询字符串重定向 Azure B2C 中的 uri。错误详情:URL 可能不包含查询字符串
- c# - 尝试从数据库中检索时出错
- python - Pandas-比较具有不同索引和不同长度的两列