javascript–原型JS–在两个容器之间移动元素–这里有什么问题？

我试图在两个列表之间移动元素.单击时的元素应移至其他列表.原型JS代码：

document.observe('dom:loaded', function() {
$$('li.available-item').each(function(element){
element.observe('click', function(){
element.removeClassName('available-item');
element.addClassName('selected-item');
$('selected-list').insert(element);
});
});
$$('li.selected-item').each(function(element){
element.observe('click', function(){
element.removeClassName('selected-item');
element.addClassName('available-item');
$('available-list').insert(element);
});
});
});


样本要素：

• Apple


• Orange


• Grapes

当我第一次单击元素时,一旦元素移动到另一个列表,它们在单击时不会移动到另一个(原始)列表.

我在这做错了什么？

解决方法:

原因是当你移动一个项目时,它仍然附加了旧的事件处理程序,它将再次移动它.

这是使用事件委派的经典之处.不要查看元素的点击次数,而是查找列表上的点击次数(因为点击次数上升),然后移动相关元素.像这样的东西：

$('available-list').observe('click', function(event) {
var li;
li = event.findElement('li');
if (li) {
event.stop();
li.addClassName('selected-item').removeClassName('available-item');
$('selected-list').insert(li);
}
});


…和选定列表相反.

您甚至可以为两个列表使用一个处理程序：

$('available-list').observe('click', listClick);
$('selected-list').observe('click', listClick);
function listClick(event) {
var fromType, toType, li;
// Get the clicked list item
li = event.findElement('li');
if (li) {
// We're handling it
event.stop();
// Determine whether moving to the selected or available list
if (this.id.startsWith("selected")) {
fromType = "selected";
totype = "available";
}
else {
fromType = "available";
totype = "selected";
}
// Update class names
li.addClassName(toType + '-item').removeClassName(fromType + '-item');
$(toType + '-list').insert(li);
}
});


如果你放弃项目上的课程(见下文),它会变得更简单：

$('available-list').observe('click', listClick);
$('selected-list').observe('click', listClick);
function listClick(event) {
var targetList, li;
// Get the clicked list item
li = event.findElement('li');
if (li) {
event.stop();
targetList = this.id.startsWith("selected") ? "available-list" : "selected-list";
$(targetList).insert(li);
}
});


有点OT,但你可能根本不需要那些选择项和可用项类.使用上面的代码,您不再需要它们了,在CSS中,您可以使用后代选择器来设置元素样式：

#selected-list li {
/* ...styles for the `li` elements in the `selected-list` ... */
}
#available-list li {
/* ...styles for the `li` elements in the `available-list` ... */
}


如果您只想影响作为列表的直接子项的lis,请使用子选择器而不是后代选择器(请注意>)：

#selected-list > li {
/* ...styles for the `li` elements in the `selected-list` ... */
}
#available-list > li {
/* ...styles for the `li` elements in the `available-list` ... */
}