在让我的 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 引用移动到正文的底部
关于javascript - 无法以正确的顺序将 JQuery 链接到 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50781128/