Jquery脚本在JSfiddle中工作，但不在html页面上 [英] Jquery script works in JSfiddle but not on html page

问题描述

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

  // Jquery脚本
函数icon_hover（）
 {
 $（＃gcp-icon）。hover函数（）{
 $（＃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; 
不透明度：0.6; 
 display：none; 
} 
 
 
＃gcp-icon 
 {
背景：url（http://i.imgur.com/soDjoS4.png）no-重复中心中心; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
 
 .hover_title {
颜色：白色; 
 width：220px; 
 margin-left：auto; 
 margin-right：auto; 
 padding-top：80px; 
 font-weight：600; 
 font-size：11pt; 
 font-family：verdana; 
} 
 
 .hover_text {
颜色：白色; 
 width：245px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：25px; 
 font-family：verdana; 
 font-size：9pt; 
} 
 
 .click_me {
颜色：白色; 
 width：160px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：8px; 
 font-weight：600; 
 font-size：10pt; 
 font-family：verdana; 
} 
 
 <！ -  HTML  - > 
< div class =site_logoid =gcp-icon> 
< div class =site_logo_hoverid =gcp-icon-hover> 
< div class =hover_titleid =gcp-title> Grace Cook摄影< / div> 
< div class =hover_textid =gcp-text>简单，细腻，干净，美观< / div> 
< div class =click_me>点击查看更多详情< / div> 
< / div> 
< / div> 
  

但是，正如标题所示，当它被复制并粘贴到html页面并打开网页浏览器看到这个，这不符合预期。

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

解决方案

问题可能出现在jsfiddle中，脚本是在dom ready（小提琴不能在dom预备处理程序之外工作）......但是在你的页面中，它看起来不像那样。
$ b

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

$ b 因此，将 icon_hover 的调用移动到一个DOM准备好的处理程序中

  jQuery（function（）{
 icon_hover（）; 
}）
  

演示：

I created a JSFiddle which works as intended.

//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>

However, as the title suggests, when this is copied and pasted into a html page and opened in a web browser see this, this doesn't work as intended.

I have tried debugging. The Javascript is valid and all dependencies(eg. Jquey.js etc.) are available.

解决方案

The problem might be, in jsfiddle the script was executed on dom ready (fiddle not working outside the dom ready handler).... but in your page it doesn't look like that

In jsfiddle the second dropdown in the LHS panel selects the place where the script will be added, by default it is added as a window.onload handler.

So move the invocation of icon_hover to a dom ready handler

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

Demo: Fiddle

这篇关于Jquery脚本在JSfiddle中工作，但不在html页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！