JQuery不工作，但在JSFiddle上工作

我已經誠實地嘗試了一切，我已經在這裏呆了幾天，但JQuery沒有在Dreamweaver中使用我的代碼。我聯繫了他們，這是一個編碼問題。當我將代碼複製到JSFiddle時，它可以工作，但不適用於我的HTML。這裏是的jsfiddle鏈接：https://jsfiddle.net/mufeeza/36cmxwxc/JQuery不工作，但在JSFiddle上工作

這裏是我在我的HTML鏈接它：

<script src="jquery-latest.js"></script> 
<script type="text/javascript" src="/resources/js/home.js"></script>

這裏是JS文件：

$('#contact').on('mouseenter', function() { 
    "use strict"; 
    $('body').css('background-image', 'url("https://image.ibb.co/fmOqzv/Contact.png")'); 
    $('.intro').css('opacity', '0'); 
}); 

$('#contact').on('mouseleave', function() { 
    "use strict"; 

    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)'); 
    $('.intro').css('opacity', '1'); 
}); 

$('#design').on('mouseenter', function() { 
    "use strict"; 

    $('body').css('background-image', 'url("https://image.ibb.co/d2Dqzv/Portfolio.png")'); 
    $('.intro').css('opacity', '0'); 

}); 

$('#design').on('mouseleave', function() { 
    "use strict"; 

    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)'); 
    $('.intro').css('opacity', '1'); 
}); 

$('#develop').on('mouseenter', function() { 
    "use strict"; 

    $('body').css('background-image', 'url("https://image.ibb.co/mSQPuv/develop.png")'); 
    $('.intro').css('opacity', '0'); 

}); 

$('#develop').on('mouseleave', function() { 
    "use strict"; 
    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)'); 
    $('.intro').css('opacity', '1'); 
});

來源

2017-08-14 Zeefum Dajma

也許你在加載jQuery文件之前加載了js文件，總是先加載jQuery文件。 –

嘗試從CDN更換你的jQuery來看看會發生什麼：我的其他想法將是你的路徑src是一個錯過 – Adrianopolis

的jsfiddle包裹JavaScript代碼在一個窗口的onload事件處理程序默認（window.onload=function(){...）。您可以這樣做，將其包裝在$(document).ready(function() { call中，或者將其移至文檔末尾，在關閉主體元素（</body>）之前加載。

來源

2017-08-14 19:36:56 j08691

將它移動到HTML文檔的工作結束！謝謝：） –

Jquery需要在執行時查找HTML節點。

如果您的Jquery文件包含在HTML的<head>中，那麼Jquery需要等到所有的HTML完全加載才能找到HTML節點，因此您需要告訴Jquery在加載DOM後執行，包裝您的功能

$(document).ready(function() { 
    //jQuery code here 
});

或

$(function(){ 
    //jQuery code here 
});

如果jQuery是包含在HTML的前</body>標籤底部，這意味着HTML被加載後，會執行，也沒有必要告訴jQuery的等待。

來源

2017-08-14 20:02:37

JQuery不工作，但在JSFiddle上工作

回答

相關問題