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

Question

我试图在两个列表之间移动元素.单击时的元素应移至其他列表.原型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);
    });
  });

});

样本要素:

<ul id="available-list">
  <li class="available-item">Apple</li>
  <li class="available-item">Orange</li>
  <li class="available-item">Grapes</li>
</ul>

<ul id="selected-list">
  <li class="selected-item">Pineapple</li>
  <li class="selected-item">Papaya</li>
</ul>

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

我在这做错了什么？

Answer 1

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

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

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

...和反过来selected-list.

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

$('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,但你可能根本不需要那些selected-item和available-item类.有了上述内容,您不再需要它们了,在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` ... */
}