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` ... */
}

如果您只想影响列表中直接子项的li，请使用子选择器而不是后代选择器（请注意>）：

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

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

1 个答案: