Question

因此，在尝试将所有代码存储在一个文件中而将其存储在三个单独的文件（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()">&times;</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()">&#9776; Open</span>
</body>
</html>

我打算发生的事情是，当您将鼠标悬停在叠加层的不同元素上时，它应该向div添加一个类，这将更改其背景。再说一次，这在意大利面条代码文件中有效，但现在不行了。希望能对您有所帮助，谢谢您的阅读！

Answer 1

无需动态导入jQuery，只需在javascript文件之前使用html中的脚本标签导入它即可。

另外，请确保在执行jQuery之前使用document.ready确保呈现了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()">&times;</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()">&#9776; Open</span>
</body>
</html>

jQuery更新外部文件中的父类

1 个答案: