2017-08-14 86 views
0

私は正直なところすべてを試してきましたが、数日間使っていましたが、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'); 
}); 
+1

おそらく、jQueryファイルをロードする前にjsファイルをロードしていることがあります。常にjQueryファイルをロードしてください。 –

+0

何が起こるかを見るためにCDNからあなたのjQueryを交換してみてください:<スクリプト SRC = "https://code.jquery.com/jquery-2.2.4.min.js" 整合性= "SHA256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =" crossorigin = "anonymous">私の他の考えは、srcへのあなたのパスが不足している – Adrianopolis

答えて

2

JsFiddleがウィンドウのonloadでJavaScriptコードをラップデフォルトではイベントハンドラ(window.onload=function(){...)です。 $(document).ready(function() { callでラップしたり、ドキュメントの最後、つまり本文の最後の部分(</body>)の前に読み込むことができます。

+1

HTML文書の最後まで移動しました!ありがとうございました :) –

0

Jqueryは、実行時にHTMLノードを探す必要があります。

あなたのJqueryファイルがHTMLの<head>に含まれている場合、JqueryはすべてのHTMLが完全にロードされてHTMLノードが見つかるまで待つ必要があるため、DOMがロードされた後にJqueryが実行するように指示する必要があります。 jQueryのは、HTMLがロードされた後、それが実行されることを意味し、</body>タグの前にHTMLの下部に含まれていない、とjQueryを伝えるために必要されている場合は

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

または

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

であなたの関数をラップ待つ。

関連する問題