jQuery在底部不起作用，但在头部起作用？
[英]Jquery doesn't work on the bottom, but works in the head?
问题描述
function closeMessage(el) { el.addClass('is-hidden'); } $('.js-messageClose').on('click', function(e) { closeMessage($(this).closest('.Message')); }); $(document).ready(function() { setTimeout(function() { closeMessage($('#js-timer')); }, 5000); });
* { box-sizing: border-box; } .Message { display: table; position: relative; margin: 40px auto 0; width: auto; background-color: #0074d9; color: #fff; transition: all 0.2s ease; } .Message.is-hidden { opacity: 0; height: 0; font-size: 0; padding: 0; margin: 0 auto; display: block; } .Message--orange { background-color: #f39c12; } .Message--red { background-color: #ff4136; } .Message--green { background-color: #2ecc40; } .Message-icon { display: table-cell; vertical-align: middle; width: 60px; padding: 30px; text-align: center; background-color: rgba(0, 0, 0, 0.25); } .Message-icon > i { width: 20px; font-size: 20px; } .Message-body { display: table-cell; vertical-align: middle; padding: 30px 20px 30px 10px; } .Message-body > p { line-height: 1.2; margin-top: 6px; } .Message-button { position: relative; margin: 15px 5px -10px; background-color: rgba(0, 0, 0, 0.25); box-shadow: 0 3px rgba(0, 0, 0, 0.4); border: none; padding: 10px 15px; font-size: 16px; font-family: 'Source Sans Pro'; color: #fff; outline: none; cursor: pointer; } .Message-button:hover { background: rgba(0, 0, 0, 0.3); } .Message-button:active { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0px rgba(0, 0, 0, 0.4); top: 3px; } .Message-close { position: absolute; background-color: rgba(0, 0, 0, 0.3); color: #fff; border: none; outline: none; font-size: 20px; right: 5px; top: 5px; opacity: 0; cursor: pointer; } .Message:hover .Message-close { opacity: 1; } .Message-close:hover { background-color: rgba(0, 0, 0, 0.5); } .u-italic { font-style: italic; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="Message"> <div class="Message-icon"> <img class="icn-img" src="img/turkey.png"> </div> <div class="Message-body"> <h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3> <p style="text-align: center;">"There is always something to be thankful for."</p> <button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button> </div> <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button> </div> <script src="js/jquery-3.2.1.js"></script> </body>
I read a similar question and one answered that Scripts should always be at the bottom of the HTML. 
我读了一个类似的问题，一个人回答说脚本应该总是在HTML的底部。 The thing is though, when I do that the scripts of my code doesn't work anymore. 事实是，当我这样做时，我的代码脚本不再起作用了。 And it is because I placed the Jquery at the bottom. 这是因为我将Jquery放在底部。 I am using Version 3.2.1. 我正在使用3.2.1版。
Works: <head><script src="js/jquery-3.2.1.js"></script></head> 作品： <head><script src="js/jquery-3.2.1.js"></script></head>
Does not work: <body><script src="js/jquery-3.2.1.js"></script></body> 不起作用： <body><script src="js/jquery-3.2.1.js"></script></body>
Fiddle: https://jsfiddle.net/dhtzL8cz/ 小提琴： https ： //jsfiddle.net/dhtzL8cz/
Somehow it works in the fiddle, but not on my end. 它以某种方式在小提琴中起作用，但对我而言却不是。
3 个解决方案
解决方案1
4 已采纳 2017-11-24 09:24:39
Jquery library needs to be loaded before you can load your custom js file which has jquery code in it. 需要先加载jQuery库，然后才能加载包含jQuery代码的自定义js文件。
For example if you have a script.js file in which you have written your jquery code, that needs to be loaded after jquery.js. 例如，如果您有一个其中编写了jquery代码的script.js文件，则需要在jquery.js之后加载。
Otherwise your code will not work. 否则，您的代码将无法正常工作。 If you load jquery.js at the bottom of your body, the browser will load the entire html first before jquery, hence causing the issue. 如果在您的身体底部加载jquery.js，则浏览器将首先在jquery之前加载整个html，从而引起问题。
It is not necessary to put js files at the bottom. 不必将js文件放在底部。 It is all based on your need. 这完全取决于您的需要。 JS files which are not necessary to be loaded before the dom loads can be put at the bottom. 可以将dom加载之前不需要加载的JS文件放在底部。
For example if you have a tracking.js file, which tracks the user's behaviour, that could be put at the bottom. 例如，如果您有一个tracking.js文件来跟踪用户的行为，则可以将其放在底部。
Hope this helps :) 希望这可以帮助 ：）
解决方案2
0 2017-11-24 09:39:51
You are probably loading scripts requiring jQuery before this one is called. 在调用此脚本之前，您可能正在加载需要jQuery的脚本。
<body>
<script src="js/[your custom scripts]"></script>
<script src="js/jquery-3.2.1.js"></script>
</body>
You should add these scripts after you call jquery 调用jquery 后，应添加这些脚本
<body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/[your custom scripts]"></script>
</body>
If some for reason this is not possible, you can set an event listener in order to run them after the whole page assets are loaded wrapping them as follows: 如果由于某种原因这是不可能的，则可以设置一个事件侦听器，以便在装入整个页面资产并将它们包装后，如下运行它们：
document.addEventListener("DOMContentLoaded", function(event) {
enter code here//The content of your scripts here
});
解决方案3
0 2017-11-24 09:50:47
call custom jQuery code after jQuery in folder its working fine, you only have to do is cal your custom jQuery code after importing jQuery in footer . 在文件夹中的jQuery正常工作后调用自定义jQuery代码，您只需在页脚中导入jQuery后校准自定义jQuery代码即可。 hope it helps. 希望能帮助到你。
here is the codepen link it works 这是它的codepen链接
codepen.io link of the working code 工作代码的codepen.io链接
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
</style>
</head>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.