我已经定义了以下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,一切都会简单得多,但不幸的是,这不是一个选择:
答案 0 :(得分:4)
您可以使用 invoke 方法绑定事件处理程序,以及切换它们,而不是遍历集合中的所有箭头。这是一个例子:
var arrows = $$('.toggle-arrow');
arrows.invoke("observe", "click", function () {
arrows.invoke("toggle");
});
答案 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');
}