無法通過原型添加NodeList自定義方法

-1

我想創建一個輔助函數來幫助迭代子節點。無法通過原型添加NodeList自定義方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <ul class="list"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 

    <script> 
     NodeList.prototype.addEvent = func => { 
      for (let i = 0; i < this.length; i++) { 
       this[i].addEventListener('click', func) 
      } 
     } 

     let myList = document.getElementsByClassName('list')[0] 

     function test() { 
      console.log('Hello') 
     } 

     myList.addEvent(test) 
    </script> 
</body> 
</html>

我收到「myList.addEvent不是函數」，無論我嘗試什麼。

我已經看到了如何實現這一目標上MDN（頁面的中間），源爲例：https://developer.mozilla.org/en-US/docs/Web/API/NodeList

var elements = document.querySelectorAll(".suggestions"); 

NodeList.prototype.addEventListener = function(event, func) { 
    this.forEach(function(content, item) { 
     content.addEventListener(event, func); 
    }); 
} 

function log() { 
    console.log(this, " was clicked"); 
} 

elements.addEventListener("click", log);

UPDATE：

使用.querySelectorAll（）適用於添加原型到NodeList但不是.getElementsByClassName（...）[0]，.getElementsByTagName（...）[0]或.getElementById（...） - 有沒有人知道這是如何只適用於靜態節點清單？

來源

2017-09-29 DarkCodeWiz

'addEvent'！=='AddEvent' – Utkanos

@Utkanos能否請你澄清？ – DarkCodeWiz

@DarkCodeWiz JavaScript區分大小寫。 – Xufox

你正在創建AddEvent()，但調用addEvent() - 注意的情況下的差異。

來源

2017-09-29 13:50:07 Utkanos

代碼存在多個問題。

NodeList.prototype.AddEvent = function(func) { 
 
    for (let i = 0; i < this.length; i++) { 
 
    this[i].addEventListener('click', func); //notice this[i] instead of this 
 
    } 
 
} 
 

 
var myList = document.querySelectorAll('.list'); //notice that element name is not .list so use querySelectorAll 
 
myList.AddEvent(test); //addEvent to AddEvent 
 

 
function test() 
 
{ 
 
    console.log('Hello') 
 
}

<div class="list"> 
 
    List div 
 
</div>

來源

2017-09-29 13:52:49 gurvinder372

對不起，因爲它是假想的代碼印刷錯誤。我將嘗試運行我正在粘貼的示例，然後更新我的答案。 – DarkCodeWiz

現在如何，關於爲什麼我仍然得到這個錯誤的任何想法？ – DarkCodeWiz

@ gurdvinder372 .querySelectorAll（）工作，但不是.getElementsByClassName（...）[0]，getElementsByTagName（...）[0]或getElementById（...） - 這只是如何工作在靜態節點列表？ – DarkCodeWiz

無法通過原型添加NodeList自定義方法

回答

相關問題