IE8 中的 JavaScript 错误 - 预期为 ';' & 'position().left' 为空

Question

有人可以帮帮我吗，在完成之前我无法完成网站，这对我的家人来说是一个惊喜:(

我在 IE8 中遇到了一个错误。此功能在所有浏览器上都能正常运行。为什么 IE 会标记错误，我根本不明白，我只能看到在修复之前没有出路:(请帮帮我，一定有一个小故障导致了明显不可见的错误......

这些是错误，如果有人可以帮助我，我将不胜感激。我对脚本感到困惑。

** 错误**

消息：'position().left' 为空或不是对象行：44 字符：5 代码：0

这是第 44 行 - 位于脚本中：

$magicLineTwo

这是脚本的全部代码，这个脚本中没有其他内容，有两组标记为“示例1和示例2”，第二个是问题：

 $(function(){

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one"),
        $mainNav2 = $("#example-two");

    /*
        EXAMPLE ONE
    */
    $mainNav.append("<li id='magic-line'></li>");

    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });


    /*
        EXAMPLE TWO
    */
    $mainNav2.append("<li id='magic-line-two'></li>");

    var $magicLineTwo = $("#magic-line-two");

    $magicLineTwo
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));

    $("#example-two li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel"),
        });
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
            backgroundColor: $magicLineTwo.data("origColor")
        });    
    });
});

Answer 1

这有很多错误，所以我不会详细介绍（例如，一页上有多个 jQueries，引用的元素不在 DOM 上等）。

这在我的机器上的 IE8 中有效，您可以随意修复有问题的样式。在 Chrome 或 IE 中没有显示 JS 错误：

http://jsfiddle.net/KyleMuir/ghAkB/15/embedded/result/

这里是固定的JS：

$(function () {

    var $el, leftPos, newWidth,
    $mainNav = $("#example-one")
    /*
    EXAMPLE ONE
*/
    $mainNav.append("<li id='magic-line'></li>");

    var $magicLine = $("#magic-line");

    $magicLine.width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li").find("a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
    }, function () {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

小提琴：http://jsfiddle.net/KyleMuir/ghAkB/15/

希望这会有所帮助。