IE8中的JavaScript錯誤 - 預計';' ＆'position（）。left'爲空

Question

有人可以幫助我，我不能完成網站，直到完成，是我的家人的驚喜:(

我在IE8得到一個錯誤。這個功能在所有瀏覽器上都能正常工作，爲什麼IE會標記錯誤，我根本就不明白，我只能看到它是無法解決的，直到它被修復:(請幫助我，必須有一個小毛刺引起這顯然是不可見的錯誤...

這些都是錯誤的，我將不勝感激，如果有人能幫助我。我就要用腳本混淆。

**錯誤**

Message: 'position().left' is null or not an object Line: 44 Char: 5 Code: 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/

希望這有助於。