javascript - 以正确的顺序将 JQuery 链接到 HTML 时出现问题
问题描述
我在让我的 JQuery 正确加载方面遇到了很多问题。我看过 youtube 视频并搜索了谷歌,但似乎没有任何效果:(
JQuery 未正确加载的最常见问题是人们在 JQuery 之前加载 js 文件,但我已以正确的顺序加载它,但我仍然遇到问题。
以前,我能够运行仅在本地使用 JQuery 的功能,但现在即使这样也行不通。
这是我的 index.html 文件:
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel = "stylesheet" href="style.css" /> <!-- Link to css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"> </script> <!-- link to js AFTER JQuery-->
`
<!-- Import Fonts to Use -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li><a href="home.html" data-content="The beginning">Home</a></li>
<li><a href="about.html" data-content="Curious?">About</a></li>
<li><a href="projects.html" data-content="Showcasing my skills">Works</a></li>
<li><a href="resume.html" data-content="Reach out for a copy">Resume</a></li>
<li><a href="contact.html" data-content="Don't hesitate">Contact</a></li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
<span class="bar-top"></span>
</div>
</section>
</body>
</html>
我有一个名为“style.css”的css文件
这是我的名为“script.js”的 js 文件
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
任何帮助,将不胜感激!!谢谢!!
解决方案
你的 js 文件应该放在正文的底部。您在 js 中引用尚不存在的 dom 元素,因为它们尚未加载到标记中。
将您的 jquery 和 js 引用移动到正文的底部
推荐阅读
- c++ - 如何将变换矩阵转换为四元数?
- anylogic - 确定资源池存放托盘的时间
- c++ - 是一个“包罗万象”的块,它释放动态分配的内存,然后重新抛出一个有效/好的设计选择?
- sql - Varchar 到日期时间格式
- c# - 我可以在 Visual Studio 2013 中使用最新版本的 c# 吗?
- python - /order 'OrderClass' 对象的 AttributeError 在视图内的 for 循环中没有属性 'item'
- python-3.x - 在 collections.defaultdict 示例“%(object)s”中“object”是如何工作的?
- android - 每次我打开和关闭我的应用程序时都会出现异常
- javascript - 当下拉列表的值发生变化时,如何重新渲染 Flatlist?
- kubernetes - 失败的 cassandra-operator-1.0.0