原型事件处理程序

时间:2013-08-14 14:39:37

标签: javascript prototypejs

我已经定义了以下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,一切都会简单得多,但不幸的是,这不是一个选择:

3 个答案:

答案 0 :(得分:4)

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

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

DEMO: http://jsfiddle.net/ddMn4/

答案 1 :(得分:0)

我意识到这不是你所要求的,但请考虑这样的事情:

<div class="toggle-arrow-container">
    <span class="toggle-arrow" style="color: pink;">▶</span>
    <span class="toggle-arrow" style="display:none; color: orange;">▶</span>
</div>

document.on('click', '.toggle-arrow-container .toggle-arrow', function(event, el) {
    var buddies = el.up('.toggle-arrow-container').select('.toggle-arrow');
    buddies.invoke('toggle');
});

这将允许您在页面上有多个“切换集”。看看小提琴:http://jsfiddle.net/nDppd/

希望这对你的Prototype冒险有所帮助。

答案 2 :(得分:0)

脱下袖口:

function toggleArrows(e) {
  e.stop();

  // first discover clicked arow
  var clickedArrow = e.findElement();

// second hide all arrows
  $$('.toggle-arrow').invoke('hide');

// third find arrow that wasn't clicked
  var arw = $$('.toggle-arrow').find(function(a) {
    return a.identify() != clickedArrow.identify();
  });

// fourth complete the toggle
  if(arw)
     arw.show();

}

连接文档加载事件中的切换箭头功能,如此

document.on('click','.toggle-arrow', toggleArrows.bindAsEventListener());

就是这样,如果你利用两个css类:箭头和箭头选择,你会获得更多的成功。然后你可以使用这些类名称轻松编写你的选择器来调用你的hide / show“toggle”,例如:

function toggleArrows(e) {
    e.stop();

    $$('.toggle-arrow').invoke('hide');
    var arw = $$('.toggle-arrow').reject(function(r) { 
        r.hasClassName('arrow-selected'); });

    $$('.arrow-selected').invoke('removeClassName', 'arrow-selected');

    arw.show();
    arw.addClassName('arrow-selected');

}