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

也许你在加载jQuery文件之前加载了js文件，总是先加载jQuery文件。 –

尝试从CDN更换你的jQuery来看看会发生什么：我的其他想法将是你的路径src是一个错过 – Adrianopolis

答

的jsfiddle包裹JavaScript代码在一个窗口的onload事件处理程序默认（window.onload=function(){...）。您可以这样做，将其包装在$(document).ready(function() { call中，或者将其移至文档末尾，在关闭主体元素（</body>）之前加载。

将它移动到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的等待。

JQuery不工作，但在JSFiddle上工作

相关推荐