無法獲取屬性「調用」的值：對象爲空或未定義IE8

Question

在IE8中，我的菜單腳本看起來並不順利。但經過一番搜索我想不通爲什麼它拋出這樣的錯誤：

SCRIPT5007: Unable to get value of the property 'call': object is null or undefined 
site.js, line 5 character 5 

我的腳本是：

var anchor = document.querySelectorAll('button'); 

    [].forEach.call(anchor, function(anchor){ 
     var open = false; 
     anchor.onclick = function(event){ 
     event.preventDefault(); 
     if(!open){ 
      this.classList.add('close'); 
      open = true; 
     } 
     else{ 
      this.classList.remove('close'); 
      open = false; 
     } 
     }; 
    }); 

此腳本處理我的手機導航，但我仍然在學習，我可以這個數字不值一提。任何人都可以幫助我指出正確的方向嗎？

Answer 1

Array.forEach()在IE8中不受支持。

由於您使用jQuery使用$.each()標記了問題來迭代數組。

使用jQuery這可以寫成

$('button').click(function(){ 
    $(this).toggleClass('close') 
}) 

一個vanila腳本解決方案可以

var anchor = document.querySelectorAll('button'); 

function handler(e) { 
    if (/\bclose\b/.test(this.className)) { 
     this.className = this.className.replace(/\bclose\b/, ''); 
    } else { 
     this.className += ' close'; 
    } 
} 

for (var i = 0; i < anchor.length; i++) { 
    if (window.addEventListener) { 
     anchor[i].addEventListener('click', handler, false); 
    } else { 
     anchor[i].attachEvent('onclick', handler); 
    } 
} 

演示：在IE8 Fiddle