Question

我使用了以下脚本：

script type="text/javascript">
    $(document).ready(function () {
    $('li:last-child').hover(function () {
        $('#test').addClass('transparent'); //mouseover
    }, function () {
        $('#test').removeClass('transparent'); //mouseout
    });
});
</script>

使用以下HTML布局：

<body onload="javascript that makes the menu...">
    <div id="menu" //this houses the li elements that are created by the javascript></div>
    <div id="test">

基本上，我有javascript创建一个充满li元素的菜单。这些元素中的最后一个应该能够在悬停时使用id测试更改div的不透明度。相关的CSS如下：

.transparent{
        opacity: 0 !important;
}

但由于某种原因，此代码不起作用。在浏览器的控制台中检查给我一个TypeError，$（...）在启动上面的javascript的行中为空。什么可能导致这个错误，我怎么能解决它？

Answer 1

也许你的JQuery库没有被加载或者它有冲突。您是否尝试使用jQuery（文档）而不是$（文档）？它有相同的行为吗？如果有，我建议你查看你的图书馆的路径，如果它是正确的。

Answer 2

看起来jQuery没有及时加载。要解决此问题，请确保在脚本运行之前加载jQuery。此外，请确保在您描述的错误之前没有发生javascript错误。（你可以在大多数浏览器中按F12来检查这一点，以打开javascript控制台。）

所以你的代码看起来像这样：

<!-- Load jQuery -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Now do stuff with jQuery -->
<script type="text/javascript">
    $(document).ready(function () {
       ...
    });
</script>

注意：或者，某些内容可能会重新定义$。我认为这是不太可能的，但有可能你在某处做了一些代码。

什么可以导致document.ready函数为null？

2 个答案: