爲什麼JSFiddle以不同的方式渲染我的代碼？

-1

我一直在JSFiddle中的一段代碼。代碼完全按照JSFiddle的預期顯示，但在我自己的HTML文件中使用它時不會按預期方式顯示。爲什麼JSFiddle以不同的方式渲染我的代碼？

兩者之間的差異通常會很快且很容易被發現，但據我所知這兩個代碼實際上是完全相同的（除了所需的新增$(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'); 
     }); 
    });

我的實現：

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

我害怕一個非常明顯的錯誤，但我根本無法理解我錯過了什麼。

來源

2016-11-22 Syn

如果您檢查您的網站控制檯，你會看到：

頁的「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)。

來源

2016-11-22 10:12:58

謝謝。我知道它會是這樣的！這就是獨自一人在咖啡上漫長的夜晚對你的影響！ – Syn

沒問題，很樂意幫忙。還要注意，在'.expose'元素上使用'ready（）'方法是多餘的，可以刪除：jsfiddle.net/kwuo5bra/1 –

-1

因爲您在元素準備就緒之前運行代碼。在結束body標記之前移動您的JS代碼。

來源

2016-11-22 10:13:02 n1kkou

而你在''''''''' .expose'元素。 – n1kkou

OP在'$（window）.load（）'下運行他的代碼，這是完全有效的。問題是URL協議不匹配，與JS邏輯無關 –

確實如此，但他在元素本身上使用'ready'，而不是將整個代碼從jQuery包裝到文檔'.ready'狀態中並且擺脫了vanilla js'加載'狀態。 – n1kkou

您需要在您的網頁上添加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>

此外，在你的代碼中，揭露（）不給init元素的好辦法。改爲使用(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'); 
     }); 
    }); 
});

來源

2016-11-22 10:15:33

爲什麼JSFiddle以不同的方式渲染我的代碼？

回答

相關問題