Javascript 为什么jquery中存在对象预期错误？_Javascript_Jquery_Html_Css_Debugging

Javascript 为什么jquery中存在对象预期错误？

javascript jquery html css debugging

Javascript 为什么jquery中存在对象预期错误？,javascript,jquery,html,css,debugging,Javascript,Jquery,Html,Css,Debugging,我有一个简单的网页，有html、css和jquery。本页的目的是演示水平折叠窗格 <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <title>Sample HTML</title> <style type="text/css">

我有一个简单的网页，有html、css和jquery。本页的目的是演示水平折叠窗格

<html>

<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
    <title>Sample HTML</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: 10%;
            height: 100%;
            float: left;
        }

        #sidebar {
            width: 89%;
            height: 100%;
            float: left;
            border: 1px solid;
        }

        #toggle {
            height: 10%;
            float: right;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function () {//this is error line

            $(document).ready(function () {
                $("#toggle").click(function () {
                    if ($(this).data('name') == 'show') {
                        $("#sidebar").animate({
                            width: '10%'
                        }).hide()
                        $("#map").animate({
                            width: '89%'
                        });
                        $(this).data('name', 'hide')
                    } else {
                        $("#sidebar").animate({
                            width: '89%'
                        }).show()
                        $("#map").animate({
                            width: '10%'
                        });
                        $(this).data('name', 'show')
                    }
                });
            });
        });
    </script>


    </head>
<body>

    <div id="map">
        <input type="button" data-name="show" value="Toggle" id="toggle"></div>
    <div id="sidebar">SIDEBAR</div>
</body>
</html>


示例HTML
html，正文{
宽度：100%；
身高：100%；
}
#地图{
宽度：10%；
身高：100%；
浮动：左；
}
#边栏{
宽度：89%；
身高：100%；
浮动：左；
边框：1px实心；
}
#拨动{
身高：10%；
浮动：对；
}
$（窗口）.load（函数（）{//这是错误行
$（文档）.ready（函数（）{
$（“#切换”）。单击（函数（）{
if（$（this）.data（'name'）=='show'）{
$（“#侧边栏”）。设置动画({
宽度：“10%”
}).hide（）
$（“#贴图”）。设置动画({
宽度：“89%”
});
$（此）.data（'名称'，'隐藏'）
}否则{
$（“#侧边栏”）。设置动画({
宽度：“89%”
}).show（）
$（“#贴图”）。设置动画({
宽度：“10%”
});
$（此）.data（'name'，'show'）
}
});
});
});
边栏

我使用了IE调试器，它点击了

$（窗口）。加载（函数（）

）表示需要对象。我不明白为什么它不工作

此外，加载此页面需要花费很长时间。

您不需要使用

$（窗口）。加载（函数（）{

作为

$（文档）。准备就绪

是因为

文档。准备就绪

在DOM准备就绪时触发，

窗口。加载

在加载图像或任何其他资源时触发。有关更多信息，请参阅

由于jquery库路径不正确，所以出现错误，请再次检查下面的路径

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

您可以在更正库路径后删除

窗口。加载，它应该可以工作
<script type="text/javascript">

            $(document).ready(function () {
                $("#toggle").click(function () {
                    if ($(this).data('name') == 'show') {
                        $("#sidebar").animate({
                            width: '10%'
                        }).hide()
                        $("#map").animate({
                            width: '89%'
                        });
                        $(this).data('name', 'hide')
                    } else {
                        $("#sidebar").animate({
                            width: '89%'
                        }).show()
                        $("#map").animate({
                            width: '10%'
                        });
                        $(this).data('name', 'show')
                    }
                });
            });
    </script>


$（文档）.ready（函数（）{
$（“#切换”）。单击（函数（）{
if（$（this）.data（'name'）=='show'）{
$（“#侧边栏”）。设置动画({
宽度：“10%”
}).hide（）
$（“#贴图”）。设置动画({
宽度：“89%”
});
$（此）.data（'名称'，'隐藏'）
}否则{
$（“#侧边栏”）。设置动画({
宽度：“89%”
}).show（）
$（“#贴图”）。设置动画({
宽度：“10%”
});
$（此）.data（'name'，'show'）
}
});
});
是否使用文件协议加载html文件，如file://path-to-file
@ArunPJohny No.I它保存在我的桌面上。我正在使用IE和Chrome打开它，两者都不起作用。“它保存在我的桌面上”所以你是从文件系统而不是从web服务器加载它？仅供参考，你只需要（窗口）。加载（…）
或$（文档）。就绪（…）
但不是两者都有，当然也不是嵌套的。控制台中是否有其他错误基于相关问题，我99%确定您必须使用src=”http://code.jquery.com/jquery-1.10.1.js“
。请解释为什么使用$（窗口）。加载（函数（）{
在这种情况下会产生问题中提到的错误。为了澄清为什么要评论：虽然你的建议肯定是正确的，但它并不能解决当前的问题。我不知道问题中提到的错误，但是文档.ready
在DOM准备就绪时触发，窗口.load
在所有资源时触发，DOM are ready，因此在窗口内使用document.ready
没有意义。load
。而作为OP，在jquery脚本内使用DOM元素，则没有必要使用窗口。load这样。我正在查找错误背后的确切原因。当jquery库路径不正确时，会出现此错误。。
<script type="text/javascript">

            $(document).ready(function () {
                $("#toggle").click(function () {
                    if ($(this).data('name') == 'show') {
                        $("#sidebar").animate({
                            width: '10%'
                        }).hide()
                        $("#map").animate({
                            width: '89%'
                        });
                        $(this).data('name', 'hide')
                    } else {
                        $("#sidebar").animate({
                            width: '89%'
                        }).show()
                        $("#map").animate({
                            width: '10%'
                        });
                        $(this).data('name', 'show')
                    }
                });
            });
    </script>