IE 中的 JavaScript 调试

Question

尽管我发现了有关此主题的几个问题，但我没有找到解决我自己问题的运气。我缺乏 javascript 知识很可能是造成这种情况的原因。无论如何，如果有人能帮助我解决这个问题，那就太好了。

我在 html 中实现了几个 JavaScript。它们似乎都可以工作，但不知何故，当我再次启动 IE 进行测试时，最终却没有工作。我在 IE 上运行了调试测试，出现了警告:“nodeType”为 null 或不是对象。我不完全确定要发布脚本的哪一部分，因此下面是 html 的整个脚本部分:

头

    <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

    <link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="tablecloth/tablecloth.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">  


    var $jq = jQuery.noConflict();  
    </script>

    <script type="text/javascript" src="jquery.twitter.js"></script>

    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
        $jq(document).ready(function() {
            $jq("#twitter").getTwitter({
                userName: "ronnsono",
                numTweets: 2,
                loaderText: "Loading tweets...",
                slideIn: false,
                showHeading:false,
                headingText: "Latest Tweets",
                showProfileLink: false
            });
        });
    //--><!]]>
    </script>

body

    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <!-- the mousewheel plugin - optional to provide mousewheel support -->
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var $menu           = $('#mb_menu'),
            $menuItems          = $menu.children('a'),
            $mbWrapper          = $('#mb_content_wrapper'),
            $mbClose            = $mbWrapper.children('.mb_close'),
            $mbContentItems     = $mbWrapper.children('.mb_content'),
            $mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
            $mbPattern          = $('#mb_pattern'),
            $works              = $('#mb_imagelist > li'),
            $mb_bgimage         = $('#mb_background > img'),

            Menu                = (function(){

                var init        = function() {
                    preloadImages();
                    initPlugins();
                    initPattern();
                    initEventsHandler();
                },
                //preloads the images for the work area (data-bgimg attr)
                preloadImages   = function() {
                    $works.each(function(i) {
                        $('<img/>').attr('src' , $(this).children('img').data('bgimg'));
                    });
                },
                //initialise the jScollPane (scroll plugin)
                initPlugins     = function() {
                    $mbContentInnerItems.jScrollPane({
                        verticalDragMinHeight: 40,
                        verticalDragMaxHeight: 40
                    });
                },
                /*
                    draws 16 boxes on a specific area of the page.
                    we randomly calculate the top, left, and rotation angle for each one of them
                 */
                initPattern     = function() {
                    for(var i = 0; i < 16 ; ++i) {
                        //random opacity, top, left and angle
                        var o       = 0.1,
                        t       = Math.floor(Math.random()*196) + 5, // between 5 and 200
                        l       = Math.floor(Math.random()*696) + 5, // between 5 and 700
                        a       = Math.floor(Math.random()*101) - 50; // between -50 and 50

                        $el     = $('<div>').css({
                            opacity         : o,
                            top             : t + 'px',
                            left            : l + 'px'
                        });

                        if (!$.browser.msie)
                            $el.transform({'rotate' : a + 'deg'});

                        $el.appendTo($mbPattern);
                    }
                    $mbPattern.children().draggable(); //just for fun
                },
                /*
                    when the User closes a content item, we move the boxes back to the original place,
                    with new random values for top, left and angle though
                 */
                disperse        = function() {
                    $mbPattern.children().each(function(i) {
                        //random opacity, top, left and angle
                        var o           = 0.1,
                        t           = Math.floor(Math.random()*196) + 5, // between 5 and 200
                        l           = Math.floor(Math.random()*696) + 5, // between 5 and 700
                        a           = Math.floor(Math.random()*101) - 50; // between -50 and 50
                        $el         = $(this),
                        param       = {
                            width   : '50px',
                            height  : '50px',
                            opacity : o,
                            top     : t + 'px',
                            left    : l + 'px'
                        };

                        if (!$.browser.msie)
                            param.rotate    = a + 'deg';

                        $el.animate(param, 1000, 'easeOutExpo');
                    });
                },
                initEventsHandler   = function() {
                    /*
                        click a link in the menu
                     */
                    $menuItems.bind('click', function(e) {
                        var $this   = $(this),
                        pos     = $this.index(),
                        speed   = $this.data('speed'),
                        easing  = $this.data('easing');
                        //if an item is not yet shown
                        if(!$menu.data('open')){
                            //if current animating return
                            if($menu.data('moving')) return false;
                            $menu.data('moving', true);
                            $.when(openItem(pos, speed, easing)).done(function(){
                                $menu.data({
                                    open    : true,
                                    moving  : false
                                });
                                showContentItem(pos);
                                $mbPattern.children().fadeOut(500);
                            });
                        }
                        else
                            showContentItem(pos);
                        return false;
                    });

                    /*
                        click close makes the boxes animate to the top of the page
                     */
                    $mbClose.bind('click', function(e) {
                        $menu.data('open', false);
                        /*
                            if we would want to show the default image when we close:
                            changeBGImage('images/default.jpg');
                         */
                        $mbPattern.children().fadeIn(500, function() {
                            $mbContentItems.hide();
                            $mbWrapper.hide();
                        });

                        disperse();
                        return false;
                    });

                    /*
                        click an image from "Works" content item,
                        displays the image on the background
                     */
                    $works.bind('click', function(e) {
                        var source  = $(this).children('img').data('bgimg');
                        changeBGImage(source);
                        return false;
                    });

                },
                /*
                    changes the background image
                 */
                changeBGImage       = function(img) {
                    //if its the current one return
                    if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
                        return false;

                    var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
                    $itemImage.insertBefore($mb_bgimage);

                    $mb_bgimage.fadeOut(1000, function() {
                        $(this).remove();
                        $mb_bgimage = $itemImage;
                    });
                    $itemImage.fadeIn(1000);
                },
                /*
                    This shows a content item when there is already one shown:
                 */
                showContentItem     = function(pos) {
                    $mbContentItems.hide();
                    $mbWrapper.show();
                    $mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
                },
                /*
                    moves the boxes from the top to the center of the page,
                    and shows the respective content item
                 */
                openItem            = function(pos, speed, easing) {
                    return $.Deferred(
                    function(dfd) {
                        $mbPattern.children().each(function(i) {
                            var $el         = $(this),
                            param       = {
                                width   : '100px',
                                height  : '100px',
                                top     : 154 + 100 * Math.floor(i/4),
                                left    : 200 + 100 * (i%4),
                                opacity : 1
                            };

                            if (!$.browser.msie)
                                param.rotate    = '0deg';

                            $el.animate(param, speed, easing, dfd.resolve);
                        });
                    }
                ).promise();
                };

                return {
                    init : init
                };

            })();

            /*
                call the init method of Menu
             */
            Menu.init();
        });
    </script>

Answer 1

我在 IE8 中遇到了同样的问题，“nodeType”为 null 或不是对象。我发现用最新版本更新你的 jQuery 的解决方案。