Jquery 脚本适用于 JSfiddle 但不适用于 html 页面答案

【问题标题】：Jquery script works in JSfiddle but not on html pageJquery 脚本适用于 JSfiddle 但不适用于 html 页面
【发布时间】：2017-07-23 14:23:23
【问题描述】：

我创建了一个JSFiddle，它按预期工作。

//Jquery script
function icon_hover()
{
    $("#gcp-icon").hover( function(){
       $("#gcp-icon-hover").slideDown();
 },
 function(){
    $("#gcp-icon-hover").slideUp();
});
}

icon_hover();


   //CSS
.site_logo{
    width: 250px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.75);
}
.site_logo_hover{
    width: 250px;
    height: 250px;
    background-color:#000000;
    opacity:0.6;
    display:none;
}


#gcp-icon
{
    background: url(http://i.imgur.com/soDjoS4.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.hover_title{
    color: white;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    font-weight: 600;
    font-size: 11pt;
    font-family: verdana;
}

.hover_text{
    color: white;
    width: 245px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px; 
    font-family: verdana;
    font-size:9pt;
}

.click_me{
    color: white;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    font-weight: 600;
    font-size: 10pt;
    font-family: verdana;
}

<!--HTML-->
<div class="site_logo" id="gcp-icon">
<div class="site_logo_hover" id="gcp-icon-hover">
    <div class="hover_title" id="gcp-title">Grace Cook Photography</div>
    <div class="hover_text" id="gcp-text">Simple, subtle, clean and good looking</div>
    <div class="click_me">Click for more details</div>
</div>
</div>

但是，正如标题所暗示的，当它被复制并粘贴到一个 html 页面并在网络浏览器 see this 中打开时，这并没有按预期工作。

我尝试过调试。 Javascript 是有效的，并且所有依赖项（例如 Jquey.js 等）都可用。

【问题讨论】：

脚本在页面中的位置...在页眉或页面底部
它位于标题中，在正文标记之前，您可以在源代码中看到aljidy.co.uk/jstest.html。
我只是将jsfiddle.net/draft中的源代码复制并粘贴到一个html页面中，它仍然不起作用。
在下面查看我的答案...对icon_hover 的调用应该在 dom 就绪处理程序中
我接受了@ArunPJohny 的回答，因为它是最全面且实施最快的。这可能不是最佳实践或在所有情况下都有效，但我无法真正检查。

标签： javascript jquery html jsfiddle

【解决方案1】：

问题可能是，在 jsfiddle 中，脚本是在 dom 就绪时执行的（fiddle 不在 dom 就绪处理程序之外工作）....但是在您的页面中它看起来不像那样

在 jsfiddle 中，LHS 面板中的第二个下拉菜单选择将添加脚本的位置，默认情况下添加为 window.onload 处理程序。

因此，将icon_hover 的调用移至 dom 就绪处理程序

jQuery(function(){
    icon_hover();
})

演示：Fiddle

【讨论】：

【解决方案2】：

当您在网页上工作时，您应该使用始终就绪事件...

$(function(){
icon_hover();

});

【讨论】：

【解决方案3】：

$( document ).ready( function() {
    $("#gcp-icon").hover(
        function () {
            $( "#gcp-icon-hover" ).slideDown();
        },
        function () {
            $( "#gcp-icon-hover" ).slideUp();
        }
    )
})

【讨论】：

【解决方案4】：

如果您仔细检查 jsfiddle... 当您在此选项下选择 JS 库（在您的情况下为 jQuery 1.10.1）时，jsFiddle 会自动为您选择 onLoad。它的作用是将你所有的 javascript 代码放在一个

$(window).load(function()
{ 
    //yourcode from jsfiddle goes in here
}

这将在窗口加载时加载您的 js 代码。

【讨论】：

【解决方案5】：

将你的启动方法绑定放在.document 中准备好。

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

同时检查任何具有相同 ID 的重复 html 元素。

【讨论】：

【解决方案6】：

$(document).ready(function(){icon_hover();});

【讨论】：