JavaScript問題與IE瀏覽器

Question

我現在大約6個月前建立了一個網站，並使用jQuery設計了一些具有一定交互性的菜單。它在我的朋友（Firefox，Safari等）中運行得很好。原來IE7 & 8不玩球。

IE中的錯誤指向jQuery（在Google的CDN上）與invalid argument。可以查看here。將鼠標移到頂部標題上，查看Firefox中會發生什麼。這個不是發生在IE7/8中。

這裏是我的效果

String.prototype.safe = function() { 
    var string = this; 
    string = string.toLowerCase().replace(/\s/g, '-'); 
    string = string.replace(/&/g, 'and'); // & appears as just & 
    return string; 
} 

var subMenu = { 
    activeMenuId: 'submenu-about-us', 
    hideDelay: null, 
    init: function(){ 
     var self = this; 
     $('#header').append('<div id="sub-menu"></div><div id="hover"></div>'); 
     $('#background-elements').append('<span></span>'); 

     var $subMenu = $('#sub-menu'); 
     var $hover = $('#hover'); 

     $('#menu li ul').each(function(){ 
      var id = 'submenu-' + $(this).parents('li').find('.inner').text().safe(); 
      $(this).attr({ 
       id: id 
      }).prependTo($subMenu); 
     }); 

     // move slider to where it should be 

     var uri = document.location.pathname; 

     uri = uri.replace(PATH_BASE + '/', '') 

     var uriSegments = uri.split('/'); 

     var currentCategory = uriSegments[0]; 

     if (currentCategory) { 

      var uriSegmentToListIndex = {}; 

      uriSegmentToListIndex['about-us'] = 0; 
      uriSegmentToListIndex['tenant-advice-and-advocacy'] = 1; 
      uriSegmentToListIndex['housing-services'] = 2; 
      uriSegmentToListIndex['tenants'] = 3; 
      uriSegmentToListIndex['applicants'] = 4; 
      uriSegmentToListIndex['housing-development-projects'] = 5; 
      uriSegmentToListIndex['news-and-publications'] = 6; 
      uriSegmentToListIndex['contact'] = 7; 

      var currentListItemIndex = uriSegmentToListIndex[currentCategory]; 

      var sliderDropShadowOffset = 14; 

      if (currentListItemIndex) { 

       var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
      } 

      $hover.css({ 
       left: sliderLeft + 'px' 
      }); 

      this.activeMenuId = 'submenu-' + currentCategory; 

      // make the right sub menu appear 

      $subMenu.find('ul').hide(); 
      $('#submenu-' + currentCategory).fadeIn(500); 
     } 




     $('#menu li .inner').parents('li').hoverIntent(function(){ 

      var id = 'submenu-' + $(this).find('.inner').text().safe(); 

      if (id != self.activeMenuId) { 

       self.activeMenuId = id; 

       $subMenu.find('ul').hide(); 

       var newLeft = $(this).position().left + sliderDropShadowOffset; // offset for drop shadow 



       $hover.animate({ 
        left: newLeft + 'px' 
       }, 500, function(){ 
        $subMenu.find('ul').hide(); // sometimes some remain 
        $('#' + id).fadeIn(800); 

       }); 

      } 



     }, function(){ 
      // do nothing! 

     }); 


    } 



} 

源代碼，我已經試過了通常的嫌疑人，並與IE8的開發工具一展身手，但還沒有想通這一個呢。所以我轉向堆棧溢出社區:)

任何人都知道這個問題？

Answer 1

該錯誤發生在這條線上IE 8：

$hover.css({ 
    left: sliderLeft + 'px' 
}); 

的sliderLeft可變永遠不會被初始化，因爲currentListItemIndex是0：

if (currentListItemIndex) { 
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
} 

>> currentListItemIndex 
0 

>> sliderLeft 
undefined 

更新

IE 8具有非常好的內置調試器（最後）：

1. 通過轉到工具 - >高級並取消選中「禁用腳本調試（Internet Explorer）」選項，確保它未被禁用。

2. 當瀏覽器遇到頁面上的錯誤時，您將收到一個對話框，詢問您是否要運行調試器。確保選中「在Internet Explorer中使用內置腳本調試器」選項。點擊「是」來啓動調試器。

3. 當傳遞一個意外的值時，很多次jQuery代碼都會出錯。這在開始時並不是很有用，因爲問題很少出現jQuery的錯誤，大部分時間代碼都被最小化了。您需要在調試器中選擇「調用棧」選項卡，然後按照堆棧調用，直到出現導致問題的代碼。這就是我能夠在腳本中找到確切的一行。

4. 您可以使用Console，Locals和Watch標籤來運行某些腳本或查看發生錯誤時正在使用的變量（如currentListItemIndex和sliderLeft變量）的當前狀態。

Answer 2

您正在使用jQuery 1.3.1，它是舊版本的jQuery，並且可能通過添加最新版本的jQuery來解決此問題。