Javascriptコールバック関数の2回の呼び出し

Question

イベントを追加する4つの入力があります。

私は

HTMLCollection.prototype.eachOnClick = function(callback){ 
 
    var len = this.length 
 
    var j = 0 
 
    for(var i = 0; i < len; i++){ 
 
     let elem = this.item(i) 
 
     document.addEventListener('click',() => { 
 
      callback(elem) 
 
     }) 
 
    } 
 
} 
 

 
document.getElementsByClassName('blog-search-filters').eachOnClick(function(elem){ 
 
    // if elem.checked do something 
 
    // else do something else 
 
    console.log(elem); 
 
})

<div class="blog-search-filters">a</div> 
 
<div class="blog-search-filters">b</div>

HTMLCollectiveに新しい関数を作成した問題のコールバック関数があるので、これらの項目の1つをクリックすると、入力のコールバックの4つのすべてが二回実行することです8回呼ばれる。

ここには何が欠けていますか？

大変助かりました。

乾杯

Answer 1

あなたは、記述されていませ要素clickを処理する必要がありそうです。

HTMLCollection.prototype.eachOnClick = function(callback){ 
    var len = this.length 
    var j = 0 
    for(var i = 0; i < len; i++){ 
     let elem = this.item(i); 

     //use elem reference here 
     elem.addEventListener('click',() => { 
      callback(elem) 
     }) 
    } 
}