Question

当选择一个复选框时，我试图将单个li元素从一个ul移到另一个。

完整代码可在此处找到：http://jsfiddle.net/8f27L0q3/1/

我的移动li项的功能可以在下面找到。

ul.addEventListener('change', (e) => {
    const checkbox = e.target;
    const checked = checkbox.checked;
    const listItem = e.target.parentNode.parentNode;
    const completedItems = 
document.querySelector('.completedItems');
    const label = document.querySelector('.completedLabel');
   if (checked) {
        completedItems.appendChild(listItem);
        label.style.display = 'none';
    }
});

一旦将li移到另一个ul，包含标签和复选框的子范围就会消失。此功能在第一个孩子li移动时起作用，但在第一个孩子li移动后不起作用。另外，第一个li的跨度消失了，因此无法移动到另一个ul

Answer 1

看起来您只需要在被单击的项目内进行搜索时，便会全局请求.completedLabel选择器。

可能会将查询选择器的范围缩小到您存储在 listItem 中的元素，可能会起作用。这是一个示例：

const label = listItem.querySelector('.completedLabel');

这样，它可以重新使用您的示例代码：

//move li item to completed list when checkbox selected
ul.addEventListener('change', (e) => {
	const checkbox = e.target;
	const checked = checkbox.checked;
	const listItem = e.target.parentNode.parentNode;
	const completedItems = document.querySelector('.completedItems');
	const label = listItem.querySelector('.completedLabel');

	if (checked) {
		completedItems.appendChild(listItem);
		label.style.display = 'none';
	}
});

不过，可以对实现进行一些调整。

Answer 2

您介意重新考虑解决此案的策略吗？建议使用数组和对象等数据，而不要使用DOM节点。

请考虑以下示例

const form = document.forms.form;
const todoList = document.querySelector('#todoList');
const completedList = document.querySelector('#completedList');
const tasks = [];

form.addEventListener('submit', handleSubmit, true);

todoList.addEventListener('change', handleInputChange, true);

function handleSubmit(event) {
    event.preventDefault();

    const task = this.task;

    if (task.value === '') {
        return;
    }

    const item = createTask(task.value);

    tasks.push(item);

    task.value = '';

    syncTodoList();
}

function handleInputChange(event) {
    const target = event.target;

    if (target.nodeName === 'INPUT') {
        const id = event.target.id;
        const task = tasks.find(task => task.id === parseInt(id, 10));

        task.status = 'completed';

        syncTodoList();
        syncCompletedList();
    }
}

function createTask(task) {
    return {
        id: Date.now(),
        text: task,
        status: 'todo'
    };
}

function syncTodoList() {
    const todos = tasks
        .filter(task => task.status === 'todo')
        .map(task => `<li>${task.text} <input type="checkbox" id="${task.id}"></li>`)
        .join('');

    todoList.innerHTML = todos;
}

function syncCompletedList() {
    const completeds = tasks
        .filter(task => task.status === 'completed')
        .map(task => `<li>${task.text}</li>`)
        .join('');

    completedList.innerHTML = completeds;
}

<form name="form">
    <input id="task">
    <button>Send</button>
</form>

<p>Todo</p>
<ul id="todoList"></ul>

<p>Completed</p>
<ul id="completedList"></ul>

将列表项从一个ul元素移动到另一个ul元素

2 个答案: