因此，当我尝试将所有代码从一个文件中转移到将其存储在三个单独的文件(CSS、HTML 和 JS)中时，我遇到了一些麻烦。当它们都在一个文件中时，我使用的 jquery 代码可以正常工作(不完美，但那是另一个问题)但它足以满足我的需要。因此，为了组织事情，我开始将代码移动到不同的文件中，而不是一个草率的 HTML 文件。
一切正常，除了 Javscript 文件中的 jQuery 代码。我正在使用 hover() 函数，这样当带有类“ne”的链接悬停时，它会将父级(屏幕覆盖)的背景更新为现在的特定图像。
但现在它在外部文件中，我不确定如何实现相同的功能。
这是我目前正在使用的代码片段:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
/*$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});*/@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>我的目标是当您将鼠标悬停在叠加层的不同元素上时，它应该向 div 添加一个类，这将更改其背景。再一次，这在意大利面条代码文件中有效，但现在不行了。希望对您有所帮助，感谢您的阅读!
最佳答案
无需动态导入 jQuery，只需在您的 javascript 文件之前的 html 中使用脚本标签导入即可。
此外，请确保您使用的是 document.ready确保在执行 jQuery 之前呈现您的 DOM:
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
$(document).ready(function(){
$(".ne").hover(function(){
$(this).parent().parent().addClass("newengland");
});
$(".ne").mouseleave(function(){
$(this).parent().parent().addClass("overlay");
$(this).parent().parent().removeClass("newengland");
});
});@import url('https://fonts.googleapis.com/css?family=Oswald:300,400');
body {
font-family: 'Oswald', sans-serif;
background-color: white;
}
.colorado{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 0px;
background-size: cover;
}
.newengland{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 2160px;
background-size: cover;
}
.europe{
width:3840px; height:2160px; background:url('D:/Desktop/Background-Images/coneeu.jpg');
background-position: 0 4320px;
background-size: cover;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Oswald;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html lang = "en">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="co" onhover = "update()" >co</a>
<a href="#" class="ne">ne</a>
<a href="#" class="eu">eu</a>
<a href="#" class="ab">ab</a>
</div>
</div>
<h2>Temp</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
</body>
</html>关于javascript - JQuery 更新外部文件中的父类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54272342/