无法通过原型添加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自定义方法

回答

相关问题