Prototype JS -在两个容器之间移动元素-这是什么问题？
Prototype JS -在两个容器之间移动元素-这是什么问题？
提问于 2010-03-11 18:29:25
我正在尝试在两个列表之间移动元素。单击元素时，应将其移动到其他列表。原型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>当我第一次点击元素时，当它工作时，一旦一个元素移动到另一个列表，当点击时它们不会移动到另一个(原始)列表。
我在这里做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-03-11 18:39:16
原因是，当您移动一个项目时，它仍然附加了旧的事件处理程序，只会再次移动它。
这是使用事件委托的典型位置。不是观察元素上的点击，而是查找列表上的点击(因为点击是气泡的)，然后移动相关的元素。如下所示：
$('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的...and反之亦然。
您甚至可以对两个列表只使用一个处理程序：
$('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` ... */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2424162
复制相关文章
相似问题
腾讯云开发者
