gpt4 book ai didi

javascript - jQuery 没有在所有浏览器中被调用

转载 作者:搜寻专家 更新时间:2023-11-01 05:26:28 25 4
gpt4 key购买 nike

免责声明:我是 jQuery 新手。

我正在尝试在 jQuery 中为一个 div block 实现 fadeOut 效果,然后在另外两个 div block 上实现 fadeIn 效果。

然而,这些效果只在 Chrome 浏览器中有效(即它们在 Safari、FireFox、Opera 中无效),这让我很困惑。我曾尝试清除我的缓存以防它存储旧文件,但似乎没有任何效果。

基本思路(保存在mainsite.js文件中):

$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});

因此,当单击 ID 为 videoThumbnail_XYZdiv 标签时,它会启动对其他 div 标签的 fadeOut 和 fadeIn 调用。

我正在按此顺序将我的 javascript 文件加载到页面中(因此首先加载 jQuery):

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>

非常感谢您提供的任何指导!

最佳答案

确保 DOM 在您的代码运行之前已完全加载。

使用 jQuery 时,一种常见的做法是像这样包装您的代码。

$(function() {
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
});

这是将代码包装在 .ready() 中的快捷方式处理程序,它确保在您的代码运行之前加载 DOM。

如果您不使用某些方法来确保加载 DOM,那么 #videoThumbnail_XYZ当您尝试选择它时,元素可能不存在。

另一种方法是将您的 javascript 代码放在您的内容之后,但结尾的 </body> 中。标签。

<!DOCTYPE html>
<html>
<head><title>your title</title></head>
<body>
<!-- your other content -->

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
</body>
</html>

关于javascript - jQuery 没有在所有浏览器中被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4683121/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com