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 input'）。observe不是函数”。我不知道为什么我收到错误...我需要使用.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而不是类名来检索元素的速度要快一些，但不是很多，但很高兴知道。

使用Prototype将事件侦听器附加到项集合

1 个答案: