与父母不同的相同元素的不同事件处理程序
问题描述:
我在学习,所以请好。与父母不同的相同元素的不同事件处理程序
比方说,我有2所列出: 1 - 事情完成(可以说5项) 2 - 完成一个(0项)
<div id="todo">
<div class="item">
<div>item 1
<button>done?</button>
</div>
</div>
<div class="item">
<div>item 1
<button>done?</button>
</div>
</div>
....
</div>
<!-- TODO END -->
<div id="done">
</div>
当我点击在按钮上它应该将项目移动到ID为'完成'的div。这工作正常。
但是让我们说我犯了一个错误,并希望这个项目再次出现在'todo'中。
我不能让它工作。
var done = document.getElementsByTagName('button');
for (var i = 0; i < done.length; i++) {
var parent = done[i].parentElement;
var gparent = parent.parentElement;
if (gparent.getAttribute('id') === 'done') {
done[i].addEventListener('click', itemDone, false);
} else if (gparent.getAttribute('id') === 'todo') {
done[i].addEventListener('click', itemNotDone, false);
}
}
以上就是我的事件侦听器的代码。
这里是从两个功能位:
这一个工作和运动从TODO项目DONE。
function itemDone() {
// take the button parent
var parent = this.parentElement;
// some other stuff here - styling changes mostly
// move challenge to done
var done = document.getElementById('done');
done.appendChild(parent);
}
但我无法摆脱DONE到TODO。
function itemNotDone() {
// take the button parent
var parent = this.parentElement;
// some other stuff here - styling changes mostly
// move challenge to done
var notdone = document.getElementById('todo');
notdone.appendChild(parent);
}
任何想法,我应该怎么改变,使其工作?
答
变化itemDone
方法
function itemDone() {
var done = document.getElementById('done');
elClone = el.cloneNode(true); //clone the node so that events are not carried forward
this.parentNode.replaceChild(elClone, el);
done.appendChild(this.parentNode);
this.parentNode.removeChild(this);
elClone.addEventListener("click", itemNotDone, false);//assign the event to go back to todo
}
随着这一变化仅是工作风格的要素是变化的东西,它甚至没有移动到完成列表中,而前面它的工作。 我不知道我是否解释得很好 - 单击按钮时,该项目应移至完成列表。在“完成”列表中单击同一个按钮时,应将项目移至TODO列表。 – haRacz
@haRacz对不起,请你分享一下你的问题小提琴http://jsfiddle.net? – gurvinder372