javascript - 在 DOM 中移动元素时，该元素是否保持状态？

Question

<ul id="task1">
  <li><input type="checkbox" id="input1"><label>Item task1></label></li>
  ... some other <li> go here
</ul>

<ul id="task2">
  <li><input type="checkbox"><label>Item task2></label></li>  
   ...
</ul>

var task1 = document.getElementById("task1");
var task2 = document.getElementById("task2");
var moveFromTask1to2 = function() { task2.appendChild(this.parentNode); }
var moveFromTask2to1 = function() { task1.appendChild(this.parentNode); }
var bindElement(listItem, task) {
  var checkbox = listItem.querySelector("input[type=checkbox]");
  checkbox.onchange = task;
}

for (var i = 0; i < task1.children.length; i++) { bindElement(task1.children[i], moveFromTask1to2); //(1)
for (var i = 0; i < task2.children.length; i++) { bindElement(task2.children[i], moveFromTask2to1); //(2)

当我选中 input1 复选框时，它应该从 task1 移动到 task2。它就是这样做的。

但是当我再次选中 input1 复选框时，它不会从 task2 回到 task1

谁能告诉我为什么？

Answer 1

问题是第一个列表 #task1 中的复选框在发生更改事件时被移动到列表 #task2 中。发生这种情况之后，在后续的更改事件中，复选框仍会移动到相同的列表中，因为事件处理程序是相同的。这就是为什么您不能将复选框移回初始列表的原因。

要修复它，您可以编写一个函数而不是两个 moveFromTask1to2 和 moveFromTask2to1。例如:

var moveFromTo = function() {
    var moveTo = this.parentNode.parentNode === task1 ? task2 : task1;
    moveTo.appendChild(this.parentNode);
};

查看下面的演示。

var task1 = document.getElementById("task1");
var task2 = document.getElementById("task2");

var moveFromTo = function() {
    var moveTo = this.parentNode.parentNode === task1 ? task2 : task1;
    moveTo.appendChild(this.parentNode);
}

var bindElement = function(listItem, task) {
    var checkbox = listItem.querySelector("input[type=checkbox]");
    checkbox.onchange = task;
}

for (var i = 0; i < task1.children.length; i++) { bindElement(task1.children[i], moveFromTo); } //(1)
for (var i = 0; i < task2.children.length; i++) { bindElement(task2.children[i], moveFromTo); } //(2)

<ul id="task1">
    <li>
        <input type="checkbox" id="input1" />
        <label>Item task11></label>
    </li>
    <li>
        <input type="checkbox" id="input1" />
        <label>Item task12></label>
    </li>
</ul>
<ul id="task2">
    <li>
        <input type="checkbox" />
        <label>Item task21></label>
    </li>
    <li>
        <input type="checkbox" />
        <label>Item task22></label>
    </li>
</ul>