Prototypeを使用してアイテムのコレクションにイベントリスナーを添付する

Question

私はたくさんの入力ボックスを持っており、それらのすべてに単一のイベントリスナーを付けたいと思っています。私の目標は、親要素（span.genre_checkbox）に「アクティブ」のクラスがあるかどうかをチェックすることです。アクティブなクラスがない場合は、適用します。アクティブなクラスがある場合は削除します。

私のコードは、などこの

<span class="genre_checkbox"><input type="checkbox" /> All Genres<br /></span> 
<span class="genre_checkbox"><input type="checkbox" /> Alternative<br /></span> 
<span class="genre_checkbox"><input type="checkbox" /> Blues<br /></span> 

のように見える...私は取得しています

$$('.genre_checkbox input').observe('click', function() { 
    if ($(this).up().hasClassName('active') == false) { 
     $(this).up().addClassName('active'); 
    } 
    else { 
     $(this).up().removeClassName('active'); 
    } 
}); 

エラーは、「$$（ 'genre_checkbox入力'）である。観測関数ではありません"なぜ私はエラーが発生しているのかわかりません... .each（）または.invoke（）を使用する必要がありますか？助けてくれてありがとう。

Answer 1

あなたは正しい方向に進んでいます。$$は配列を返し、それぞれにオブザーバーを設定する必要があります。それは、ブラウザのevent bubblingを利用することによって改善することができるしかし

$$('.genre_checkbox input').invoke('observe', 'click', function() { 
    ... 

：一つのきちんとした方法は、このようなものです。あなたはすべての入力の単一の共通の親要素が必要になります。

<div id="genre_options"> 
    <span class="genre_checkbox"><input type="checkbox" /> All Genres<br /></span> 
    <span class="genre_checkbox"><input type="checkbox" /> Alternative<br /></span> 
    <span class="genre_checkbox"><input type="checkbox" /> Blues<br /></span> 
</div> 

その後はJavaScriptが簡単です：

$('genre_options').on('click', 'input', function() { 
    ... 

ここでの利点は、唯一つのイベントは、時間を節約し、追加されており、一つだけメモリが節約されます。また、クラス名ではなくIDで要素を取得するほうがずっと速いですが、知っておいてよかったです。