Javascript 原型事件处理程序

我已经定义了以下HTML元素

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

---

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

您可以使用方法绑定事件处理程序并切换它们，而不是遍历集合中的所有箭头。下面是一个例子：

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

---

演示：

您可以使用方法绑定事件处理程序并切换它们，而不是遍历集合中的所有箭头。下面是一个例子：

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

---

<强>演示：< /强>

我意识到这不是你要的，但是考虑这样的事情：

<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');
});

▶
▶
document.on（'click'，'。切换箭头容器。切换箭头'，函数（事件，el）{
var buddies=el.up（'.toggle arrow container'）。选择（'.toggle arrow'）；
调用（'toggle'）；
});

这将允许您在页面上有多个“切换集”。看看小提琴：

---

希望这有助于你的原型冒险。

< P>我意识到这不是你想要的，但是考虑这样的事情：

<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');
});

▶
▶
document.on（'click'，'。切换箭头容器。切换箭头'，函数（事件，el）{
var buddies=el.up（'.toggle arrow container'）。选择（'.toggle arrow'）；
调用（'toggle'）；
});

这将允许您在页面上有多个“切换集”。看看小提琴：

希望这对您的原型冒险有所帮助。

即兴：

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类：arrow和arrow selected，您将获得更大的成功。然后，您可以使用这些类名轻松编写选择器来调用隐藏/显示“切换”，如下所示：

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');

}

即兴：

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类：arrow和arrow selected，您将获得更大的成功。然后，您可以使用这些类名轻松编写选择器来调用隐藏/显示“切换”，如下所示：

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');

}

---

---

我对prototypejs一无所知（我已经习惯了jQuery的方式和方法），但我搞砸了，这里是我想到的：你会犯什么错误？什么不起作用？@Ian，把它当作回答，这样我们就可以投票了you@JohnConde我只是想先把它作为评论发布，因为我不确定自己是否疯了，也不知道有没有更好的方法。不过我添加了一个答案：）这就是我的投票结果：）我对prototypejs一无所知（我习惯于jQuery的方式和方法），但是搞砸了，我想到了：你会犯什么错误？什么不起作用？@Ian，把它当作回答，这样我们就可以投票了you@JohnConde我只是想先把它作为评论发布，因为我不确定自己是否疯了，也不知道有没有更好的方法。我添加了一个答案：）这就是我的投票结果：）不，你可以使用

箭头=$$（'.toggle arrow'）.invoke（“观察”，“点击”，函数（e）{arrows.invoke（“切换”）；}）

@Bergi-ah我明白了；谢谢你…我真的不知道。我只是在跟踪行动的开始。同时，是否有类似于

toggle

ing的功能？@Bergi根据您的编辑，也许您应该创建一个答案；绝对更优雅/correct@Esailija就像我说的，不知道它怎么能/应该真的工作，只是根据OP的代码工作。请随意提出任何建议或回答（尽管Bergi的评论/代码似乎“最好”）@Ian yeah我也不知道，对我来说，代码看起来有多尴尬很有趣：PNope，你可以使用

箭头=$$（'.toggle arrow'）.invoke（“观察”，“点击”，函数（e）{arrows.invoke（“切换”）；}

@Bergi ah我明白了；谢谢你…我真的不知道。我只是在跟踪行动的开始。同时，是否有类似于

toggle

ing的功能？@Bergi根据您的编辑，也许您应该创建一个答案；绝对更优雅/correct@Esailija就像我说的，不知道它怎么能/应该真的工作，只是根据OP的代码工作。请随意提出任何建议或回答（尽管Bergi的评论/代码似乎是“最好的”）@Ian yeah我也不知道，代码看起来有多笨拙对我来说很有趣：P