为什么jquery可以在JSFIDLE上工作，而不能在本地主机上工作？

在JSFIDLE上工作的代码：
我的jquery代码：

<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/CSS/mystyle.css" />

<style>
    $(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</style>

$（函数（）{
$（“输入[value='WN']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“WN:Weekly Number.您要预订房间的连续周数”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='DN']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“DN:天数。您要预订房间的连续天数”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='DD']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“DD:Day date.您希望连续几天预订房间的日期”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='WD']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“WD:Weekly date.您要为连续几周预订房间的日期”）；
$（“#divid”）.toggle（）；
}
);
});

---

我已经检查过了，上面的代码只有在文档完全加载时才开始。。。我真的不知道为什么它不起作用。我在谷歌应用引擎上运行这个。谢谢

将代码放入脚本标记中：

<script type="text/javascript">
$(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</script>

$（函数（）{
$（“输入[value='WN']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“WN:Weekly Number.您要预订房间的连续周数”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='DN']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“DN:天数。您要预订房间的连续天数”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='DD']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“DD:Day date.您希望连续几天预订房间的日期”）；
$（“#divid”）.toggle（）；
}
);
$（“输入[value='WD']）。悬停(
函数（）{
$（'#divid'）.empty（）；
$（“#divid”）.append（“WD:Weekly date.您要为连续几周预订房间的日期”）；
$（“#divid”）.toggle（）；
}
);
});

看起来

toogle（）

给您带来了问题。 这是一张工作票

开关箱会更好

更精致的版本

$（文档）.ready（函数（）{
$（“input.selectionItems”）.live（'hover'，function（）{
optSelected=$（this.val（）；
toUpdate=$（“#divid”）；
开关（选择的选项）{
案例（“WN”）：
html（“WN:Weekly Number.您要预订房间的连续周数”）；
打破
大小写（'DN'）：
html（“DN：天数。您要预订房间的连续天数”）；
打破
案例（'DD'）：
html（“DD:Day date.您希望连续几天预订房间的日期”）；
打破
大小写（'WD'）：
html（“WD:Weekly date.您希望预订连续几周房间的日期”）；
打破
违约：
警报（“无选择”）；
}
}
);
$（'input.selectionItems'）.live（'mouseleave'，function（）{
$（“#divid”）.empty（）；
});
});​

例如，您的代码在样式标记中。您在控制台中看到任何错误吗？仅在Chrome浏览器中或在其他浏览器中以及在Localhost上都有问题吗。

$(document).ready(function(){
    $("input.selectionItems").live('hover', function() {

        optSelected = $(this).val();
        toUpdate = $("#divid");

    switch (optSelected) {
                    case ('WN'):
                        toUpdate.html("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
                        break;
                    case ('DN'):
                        toUpdate.html("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
                        break;
                    case ('DD'):
                       toUpdate.html("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
                        break;
                    case ('WD'):
                       toUpdate.html("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
                        break;
                    default:
                        alert('No Selection');
                }
            }
      );


    $('input.selectionItems').live('mouseleave', function(){
        $("#divid").empty();
    });
});​