javascript - 原型(prototype)事件处理器

Question

我定义了以下 HTML 元素

<span class="toggle-arrow">▼</span>
<span class="toggle-arrow" style="display:none;">▶</span>

当我点击其中一个元素时，应该切换两个元素的可见性。我尝试了以下原型(prototype)代码:

$$('.toggle-arrow').each(function(element) {
    element.observe('click', function() {
        $(element).toggle();
    });
});

但它不起作用。我知道如果我使用 jQuery 一切都会简单得多，但不幸的是这不是一个选项:

Answer 1

您可以使用 invoke 而不是遍历集合中的所有箭头 方法，绑定(bind)事件处理程序，以及切换它们。这是一个例子:

var arrows = $$('.toggle-arrow');
arrows.invoke("observe", "click", function () {
    arrows.invoke("toggle");
});

演示: http://jsfiddle.net/ddMn4/