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

我有一堆输入框，希望将单个事件侦听器附加到所有输入框。我的目标是检查父元素（span.genre_复选框）是否有“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_复选框输入'）。观察不是一个函数”

---

我不知道为什么我会出错。。。我是否需要使用

.each（）

或

.invoke（）

如果方向正确，

$$

将返回一个数组，您需要在每个数组上设置一个观察者。一个简单的方法是这样的：

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

这里的优点是只添加一个事件，节省时间，并且只生成一个函数，节省内存。另外，通过元素的ID而不是类名检索元素的速度稍微快一点，虽然速度不多，但很高兴知道这一点

<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>

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