Question

我老老实实地尝试了一切，并且我已经在这里工作了几天，但JQuery并没有在Dreamweaver中使用我的代码。我联系了他们，这是一个编码问题。当我将我的代码复制到JSFiddle时，它可以工作，但不适用于我的HTML。这是JSFiddle链接：https://jsfiddle.net/mufeeza/36cmxwxc/

以下是我在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');
});

Answer 1

默认情况下，JsFiddle将您的JavaScript代码包装在窗口onload事件处理程序中（window.onload=function(){...）。您可以这样做，将其包装在$(document).ready(function() { call中，或者将其移动到文档末尾，在结束体元素（</body>）之前加载。

Answer 2

Jquery在执行时需要查找HTML节点。

如果你的Jquery文件包含在HTML的<head>中，那么Jquery需要等到所有HTML完全加载才能找到HTML节点，所以你需要告诉Jquery在加载DOM之后执行，通过将您的功能包装在

中

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

或

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

如果Jquery包含在</body>标记之前的HTML底部，这意味着它将在加载HTML后执行，而不需要告诉Jquery等待。

JQuery不起作用，但在JSFiddle上工作

2 个答案: