Присоединение слушателя событий к коллекции элементов с использованием Prototype - PullRequest
Новая
       13

Присоединение слушателя событий к коллекции элементов с использованием Prototype

1 голос
/ 02 февраля 2011

У меня есть несколько полей ввода, и я хотел бы подключить к каждому из них один прослушиватель событий. Моя цель - проверить, есть ли у родительского элемента (span.genre_checkbox) класс «активный» или нет. Если у него нет класса active, примените его. Если у него есть класс active, удалите его.

Мой код выглядит так 

<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 input'). Наблюдение не является функцией". Я не уверен, почему я получаю ошибку ... мне нужно использовать .each () или .invoke ()? Спасибо за помощь.

1 Ответ

3 голосов
/ 03 февраля 2011

Вы идете в правильном направлении, $$ возвращает массив, и вам нужно установить наблюдателя для каждого из них.Один из аккуратных способов выглядит следующим образом: 

$$('.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() {
    ...

Преимущество заключается в добавлении только одного события, что экономит времяи генерируется только одна функция, сохраняющая память.Кроме того, немного быстрее получить элемент по его идентификатору, а не по имени класса, не намного, но это приятно знать.

...