將事件監聽器附加到使用原型的項目集合

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

你正朝着正確的方向發展，$$返回一個數組，你需要在每個數組上設置一個觀察者。一個巧妙的方法是這樣的：

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

但是它可以通過瀏覽器的event bubbling的優勢得到改善。你需要的全部投入一個共同的父元素：

<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而不是類名檢索元素的速度稍微快一些，但不是很多，但很高興知道。