Question

我一直在研究JSFiddle中的一段代码。代码在JSFiddle上完全按照预期显示，但在我自己的HTML文件中使用它时不会按预期显示。

两者之间的差异通常会非常快速且容易发现，但据我所知，这两个代码实际上完全相同（除了需要添加ERROR: AnalysisException: Partition spec does not exist: (column_key1=value1, column_key2=value2)之外）。

JS小提琴：http://jsfiddle.net/kwuo5bra/

$(window).load(function(){

我的实施：

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

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

Answer 1

如果您查看网站上的控制台，您会看到：

＆＃39; https://americanfizz.co.uk/dev/highlight.php＆＃39;是通过HTTPS加载的，但请求了一个不安全的脚本＆＃39; http://code.jquery.com/jquery-1.5.2.js＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。

问题是因为您的网址使用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

您需要在网站上添加jQuery，例如在您的网站中添加https。你也使用旧版本。

你有这个：

<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>

此外，在您的代码中，expose（）不是初始化元素的好方法。请改用(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

因为您在元素准备好之前运行代码。在结束body标记之前移动您的JS代码。

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

3 个答案: