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

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輸入'）.observe不是函數”

我不確定為什么會出現錯誤...我需要使用.each()還是.invoke()嗎？

Answer 1

您的方向正確， $$返回一個數組，您需要在每個數組上設置一個觀察器。 一種整潔的方式是這樣的：

$$('.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而不是通過類名來檢索元素的速度略快，雖然不多，但很高興知道。