javascript - 使用拼接从数组中删除错误的值
问题描述
我已经用 Javascript 构建了一个待办事项列表应用程序,因为所有学习者都会在某个时候,并且我正在尝试使用本地存储来存储应用程序关闭或刷新时的值。我将它们存储在这些空数组中:
var data = (localStorage.getItem('todolist')) ?
JSON.parse(localStorage.getItem('todolist')):{
todo: [],
completed: []
};
为此,每当将一个元素添加到列表中时,它都会进入待办事项列表及其数组,完成后,应将其从待办事项数组中删除并添加到已完成的数组中。我已经使用 if 语句完成了此操作:
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
data.completed.push(value);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
data.todo.push(value);
}
但是,我不确定为什么,存储在数组中的值似乎以错误的顺序移动,例如,如果值 'a'、'b'、'c' 在待办事项数组中,则移动到 ' a' 列表项从待办事项到完成,将导致完成的数组获得“a”,但待办事项数组随后删除“c”,而在存储中留下“a”重复。
我在 if 语句中有 console.log(indexOf(value)) 导致 -1,我不明白为什么,因为数组确实包含数字并且它是在此之前创建和填充的。任何帮助我指出我哪里出错了,我们将不胜感激。这是我的代码:
var data = (localStorage.getItem('todolist')) ?
JSON.parse(localStorage.getItem('todolist')):{
todo: [],
completed: []
};
renderTodoList();
//User clicked on add, adding any text in input field to to-do field.
document.getElementById('add').addEventListener('click', function(){
var value = document.getElementById('item').value;
if (value){
addItem(value);
};
});
document.getElementById('item').addEventListener('keydown', function (e){
var value = this.value;
if (e.code === 'Enter' && value){
addItem(value);
}
});
function addItem(value) {
addItemToDOM(value);
document.getElementById('item').value = '';
data.todo.push(value);
dataObjectedUpdated();
}
//Render list from memory.
function renderTodoList() {
if (!data.todo.length && !data.completed.length) return;
for (var i = 0; i <data.todo.length; i++){
var value = data.todo[i];
addItemToDOM(value);
}
for (var j = 0; j <data.completed.length; j++) {
var value = data.completed[j];
addItemToDOM(value, true);
}
}
function dataObjectedUpdated() {
localStorage.setItem('todolist', JSON.stringify(data));
console.log(data);
}
//Delete's item from list.
function removeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo'){
data.todo.splice(data.todo.indexOf(value), 1);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
}
console.log(value);
dataObjectedUpdated();
parent.removeChild(item);
}
//When item is completed or uncompleted - moving between lists.
function completeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;
if (id === 'todo') {
data.todo.splice(data.todo.indexOf(value), 1);
data.completed.push(value);
} else {
data.completed.splice(data.completed.indexOf(value), 1);
data.todo.push(value);
}
dataObjectedUpdated();
//Check if item should be added to todo or completed list
var target = (id === 'todo') ? document.getElementById('completed'): document.getElementById('todo');
parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
}
//Add item to DOM list
function addItemToDOM(text, completed){
var list = (completed) ? document.getElementById('completed') : document.getElementById('todo');
var item = document.createElement('li');
item.innerText = text;
var buttons = document.createElement('div');
buttons.classList.add('buttons');
var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;
//Add click event for removing an item
remove.addEventListener('click', removeItem);
var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;
//Add click event for completing an item
complete.addEventListener('click', completeItem);
buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);
list.insertBefore(item, list.childNodes[0]);
}
并包含在我的正文 HTML 中:
<div class="container">
<!-- Incomplete tasks --->
<ul class="todo" id="todo"></ul>
<!--Completed tasks-->
<ul class="todo" id="completed"></ul>
</div>
先感谢您!
解决方案
更改addToDom
函数以将文本保留在指定元素内,例如span。此外,当您尝试获取 时innerText
,您应该从此span获取它。
这是您的addToDom
功能的变化:
var item = document.createElement('li');
var span = document.createElement('span');
span.innerText = text;
item.append(span);
在您的 completeItem 函数中,您应该将value
变量更改为:
var value = item.getElementsByTagName('span')[0].innerText;
推荐阅读
- javascript - 如何使用 next.js 加载 CSS 模块
- ios - Safari iOS 上的 Google 字体 (Roboto)
- scala - ZIO 在并行操作上与 Cats 互操作
- angular - 如何在同一个Angular App中切换2个不同模块时更改标题
- python - 使用 API 在 Redash 上创建新查询
- java - 如何使用 java 发送断开连接请求?
- netsuite - 在 netsuite 中并排添加两个不同的子列表
- python - 仅包含 -1 和 1 的随机列表
- python-3.x - 如何从具有数据时间列的数据框中获取某个日期的总计数
- c - 为什么进程的堆栈大小会影响转储的核心文件大小?