为什么JSFiddle以不同的方式呈现我的代码？

Question

我一直在JSFiddle中编写一段代码。 该代码完全按照JSFiddle上的预期显示，但是当我在自己的HTML文件中使用该代码时却没有按预期显示。

两者之间的差异通常很容易被发现，但是据我所知，这两个代码实际上是完全相同的（除了添加的$(window).load(function(){必需）之外）。

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');
        });
    });

我的实现：

https://serallo.co.uk/highlight.php

我害怕一个非常明显的错误，但我根本无法理解我所缺少的。

Answer 1

如果您在网站上查看控制台，则会看到以下内容：

“ https://americanfizz.co.uk/dev/highlight.php ”上的页面已通过HTTPS加载，但请求了不安全的脚本“ http://code.jquery.com/jquery-1.5.2.js ”。 该请求已被阻止； 内容必须通过HTTPS提供。

问题是因为您的URL使用https:// ，但是链接到的CDN使用http:// ，因此它被阻止了，并且未加载jQuery。 您需要使用带有SSL URL的CDN。

另请注意，jQuery 1.5.2 非常过时。 您应该至少升级到1.12。 这是一个适合您的CDN链接：

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js

使用此较新版本的jQuery load()作为事件处理程序已弃用。 您需要将代码更改为$(window).on('load', fn) 。

Answer 2

您需要像在您的站点中一样在https上添加jQuery。 另外，您使用的是旧版本。

您在哪里：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

替换为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

另外，在您的代码上，Exposure（）也不是初始化元素的好方法。 请改用(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');
        });
    });
});

Answer 3

因为您在元素准备好之前运行代码。 闭幕前将您的JS代码body标记。