到目前为止，除了 jQuery 函数外，我的代码中的所有内容都有效。它在 jsfiddle 中工作得很好，但由于某种原因，该功能在我的 html 文件中不起作用。我不认为是因为从 HTML 文件复制时出现了额外的字符。我根本没有更改 HTML 文件，我只是将代码从它复制/粘贴到 jsfiddle，它开始工作了。这是 jsfiddle 的链接和我的 html 文档的代码。如果您想按照预期的方式打开程序，请将代码复制/粘贴到已删除所有元素的 google chrome 选项卡中的开发人员工具中。与黑色方 block 的巨大差距是基于本地文件的图像所在的位置。 jQuery 函数就在我的 body 元素之上。另外，我对编码还很陌生，所以对于多年来一直从事编码工作的人来说，这个错误可能是一个非常明显的错误。
https://jsfiddle.net/Lukkuss/dshcp1f2/2/
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link class="" crossorigin="anonymous" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Is it a good team comp?</title>
<style>.body-size {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
width: px;
height: 800px;
background-color: #09c1a9;
}
h3 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h1 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h2 {
height: 610px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
p {
color: yellow;
width: 650px;
background-image: url("rift map.PNG");
height: 650px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.img-size {
width: 670px;
height: 670px;
}</style>
<style>
#map-container {
position: relative;
}
</style><style>
#toplane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 150px;
left: 100px
}</style>
<style>
#jungle {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 200px;
}
</style>
<style>
#midlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 325px;
left: 290px;
}
</style><style>
#botlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 450px;
}
</style><style>
#support {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 360px;
}
</style>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$(this).css("background-color", "#4c6ccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body class="body-size">
<h1 class="text-center" style="color: #78ff00;">Is it a good team composition?
</h1>
<div class="row">
<div id="map-container">
<p class="col-md-6">Images of the selected champions will appear within the lanes that they are assigned. The program will not functon properly if you do not reset the lane assignments before entering a new team. </p>
<div id="toplane"></div>
<div id="jungle"></div>
<div id="midlane"></div>
<div id="botlane"></div>
<div id="support"></div>
</div>
<h2 class="col-md-4">
Insert the names of the champions on your team into their respective lanes.
<form>
<input id="lane-assignment" type="text" placeholder="Top Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Jungle" required=""><br>
<input id="lane-assignment" type="text" placeholder="Middle Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Bottom Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Suppport" required=""><br>
<button type="submit">Enter lane assignments
</button>
<button>
Reset lane assignments
</button></form>*IMPORTANT* The program will not function properly if the champions' names are not spelled correctly.
</h2>
<h3 class="col-md-4">
Pros:
Cons:
</h3>
</div>Specific comments about your team will appear here.</body></html>最佳答案
根据编写的 javascript/jquery，对我来说工作正常。您是否检查过以下 URL 是否可以从您的浏览器访问？ https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js
关于javascript - 我的 jQuery 脚本在 jsfiddle 中测试时有效，但在我的 HTML 文档中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43648690/