[英]Why does JSFiddle render my code differently?
I have been working on a piece of code in JSFiddle. 我一直在JSFiddle中编写一段代码。 The code displays exactly as expected on JSFiddle, but does not display as expected when I use it in my own HTML file.
该代码完全按照JSFiddle上的预期显示,但是当我在自己的HTML文件中使用该代码时却没有按预期显示。
Discrepancies between the two would usually be very quick and easy to spot, but as far as I can tell the two codes are effectively exactly the same (apart from the added $(window).load(function(){
required). 两者之间的差异通常很容易被发现,但是据我所知,这两个代码实际上是完全相同的(除了添加的
$(window).load(function(){
必需)之外)。
The JS Fiddle: http://jsfiddle.net/kwuo5bra/ JS小提琴: http : //jsfiddle.net/kwuo5bra/
$('.expose').ready(function(e){
$('.expose').css('z-index','99999');
$('#overlay').fadeIn(300);
});
$('#overlay').click(function(e){
$('#overlay').fadeOut(300, function(){
$('.expose').css('z-index','1');
});
});
My implementation: 我的实现:
https://serallo.co.uk/highlight.php
I'm dreading an incredibly obvious mistake but I simply cannot understand what I am missing. 我害怕一个非常明显的错误,但我根本无法理解我所缺少的。
If you check the console on your website you'll see this: 如果您在网站上查看控制台,则会看到以下内容:
The page at ' https://americanfizz.co.uk/dev/highlight.php ' was loaded over HTTPS, but requested an insecure script ' http://code.jquery.com/jquery-1.5.2.js '.
“ https://americanfizz.co.uk/dev/highlight.php ”上的页面已通过HTTPS加载,但请求了不安全的脚本“ http://code.jquery.com/jquery-1.5.2.js ”。 This request has been blocked;
该请求已被阻止; the content must be served over HTTPS.
内容必须通过HTTPS提供。
The problem is because your URL uses https://
, yet the CDN you linked to uses http://
, hence it's blocked and jQuery is not loaded. 问题是因为您的URL使用
https://
,但是链接到的CDN使用http://
,因此它被阻止了,并且未加载jQuery。 You need to use a CDN with an SSL URL. 您需要使用带有SSL URL的CDN。
Also note that jQuery 1.5.2 is very outdated. 另请注意,jQuery 1.5.2 非常过时。 You should upgrade to at least 1.12.
您应该至少升级到1.12。 Here's a CDN link which should work for you:
这是一个适合您的CDN链接:
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
With this newer version of jQuery load()
as an event handler is deprecated. 使用此较新版本的jQuery
load()
作为事件处理程序已弃用。 You'll need to change your code to $(window).on('load', fn)
instead. 您需要将代码更改为
$(window).on('load', fn)
。
You need to add jQuery on your page with https
like in your site. 您需要像在您的站点中一样在
https
上添加jQuery。 Also you are using a old version. 另外,您使用的是旧版本。
Where you have this: 您在哪里:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
Replace by this: 替换为:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Also, on your code, the expose() is not a good way to init the element. 另外,在您的代码上,Exposure()也不是初始化元素的好方法。 Use
(document).ready
instead. 请改用
(document).ready
。
$(document).ready(function(){
$('.expose').css('z-index','99999');
$('#overlay').fadeIn(300);
$('#overlay').click(function(e){
$('#overlay').fadeOut(300, function(){
$('.expose').css('z-index','1');
});
});
});
Because you run the code before elements are ready. 因为您在元素准备好之前运行代码。 Move your JS code before the closing
body
tag. 闭幕前将您的JS代码
body
标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.