Question

我有简单的网页，有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>

我使用IE调试器，它在$(window).load(function ()点击 Object expected 。我不明白为什么它不起作用。

此页面也需要很长时间才能加载。

Answer 1

您不需要$(window).load(function () {使用$(document).ready因为当DOM准备就绪时会发生document.ready，并且当图像或任何其他资源加载时会发生window.load。有关详细信息，请参阅this。

由于jquery库路径不正确，您的错误即将发生，因此请再次检查以下路径

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

我认为应该从http://

开始

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

您可以在更正lib路径后删除window.load，它应该可以正常工作。

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

为什么对象在jquery中出现预期的错误？

1 个答案: