クリックリスナーforEach（）クラスを作成するには

Question

私はOOPHP開発者にすぎませんので、あらかじめ許してください。ただし、クライアント側のライブチャットを友人と統合しようとしています*。

var chat = { 
 
\t open: function(id) { 
 
    \t console.log(id); 
 
    } 
 
}; 
 

 
var chatBtns = document.getElementsByClassName('chat-single'); 
 

 
// WORKS 
 
chatBtns[0].addEventListener('click', function() { 
 
\t chat.open(this.getAttribute('id')); 
 
}); 
 

 
/* DOESNT WORK 
 
chatBtns.forEach(function(btn){ 
 
    btn.addEventListener('click', function() { 
 
    \t chat.open(this.getAttribute('id')); 
 
    }); 
 
}); 
 
*/

a { 
 
    text-decoration: none; 
 
    color: blue; 
 
} 
 
a:hover { 
 
    color: purple; 
 
} 
 
.chat-wrapper { 
 
    padding: 20px; 
 
} 
 
.chat-single { 
 
    background: #efefef; 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
}

<div class='chat-wrapper'> 
 
    <p class='online-friends'> 
 
    Online Friends: (<span class='chat-online'>2</span>) 
 
    </p> 
 
    <div class='chat-friends'> 
 
    <a class='chat-single' title='chat with Some Name' href='#' id='unique-id-here'>Some Name</a> 
 
    <a class='chat-single' title='chat with Some Other Name' href='#' id='unique-id-here'>Some Other Name</a> 
 
    </div> 
 
</div>

その友人のためのユニークなチャットアイデンティティ*属性idの内部に保持されています。私はここでは、実際のデータのデモ版を作った

は私の現在のコードがあります。各ボタン（chat-single）をクリックすると、id属性が使用され、chat.open()メソッドに送信されます。

このコードをデバッグして、chatBtnsがデータ型配列であることを確認しました。したがって、forEach() documentationを見ました。ここでの問題点は、0インデックスポイントを指定すると機能することです。 forEach()を使用すると、メソッドが存在しないというエラーが表示されます。

ここの助けがあれば完璧ですし、それがどのように動作するかについての説明を得ることができますので、私が何が欠けているかを理解することができます。

私はこれを達成するためにライブラリを使用したくないことに注意してください（例：jQuery）。

Answer 1

JavaScriptには複数の配列のようなオブジェクトがあり、JavaScript Arrayとまったく同じように動作しません。

あなたの選択から返されたものはHTMLCollectionです。

document.getElementsByClassName('chat-single') instanceof HTMLCollection // true 
document.getElementsByClassName('chat-single') instanceof Array // false 

私は配列のようなオブジェクトの配列を取得するには、次のコードを使用して提案：

Array.prototype.slice.call(document.getElementsByClassName('‌​chat-single')) 

Array.prototype.sliceする配列の全体のコピーを返す関数、またはいくつかの部分であり、そこにそれが呼ばれます。

callは配列のようなオブジェクトを配列として返すthisの選択でslice関数を呼び出します。

これで実際には以前のデータの配列があるので、.forEachを呼び出すことは可能です。

Answer 2

通常のforループを使用して、HTMLCollectionを反復処理します。あなたがループするための単純なを使用するか、 `Array.prototype.slice.call（document.getElementsByClassName（「チャット-シングル」））のようなものを経由して配列に変換でき、この

var chat = { 
 
    open: function(id) { 
 
    console.log(id); 
 
    } 
 
}; 
 

 
var chatBtns = document.getElementsByClassName('chat-single'); 
 

 

 
// WORKS 
 
/*chatBtns[0].addEventListener('click', function() { 
 
\t chat.open(this.getAttribute('id')); 
 
});*/ 
 

 
/* DOESNT WORK ==> Now it works :)*/ 
 
for (var i = 0; i < chatBtns.length; i++) { 
 
    chatBtns[i].addEventListener('click', function() { 
 
    chat.open(this.getAttribute('id')); 
 
    }); 
 
}

a { 
 
    text-decoration: none; 
 
    color: blue; 
 
} 
 
a:hover { 
 
    color: purple; 
 
} 
 
.chat-wrapper { 
 
    padding: 20px; 
 
} 
 
.chat-single { 
 
    background: #efefef; 
 
    padding: 5px; 
 
    border: 1px solid #000; 
 
}

<div class='chat-wrapper'> 
 
    <p class='online-friends'> 
 
    Online Friends: (<span class='chat-online'>2</span>) 
 
    </p> 
 
    <div class='chat-friends'> 
 
    <a class='chat-single' title='chat with Some Name' href='#' id='unique-id-here'>Some Name</a> 
 
    <a class='chat-single' title='chat with Some Other Name' href='#' id='unique-id-here'>Some Other Name</a> 
 
    </div> 
 
</div>