【发布时间】：2021-09-07 16:36:59
【问题描述】：
我正在尝试使用 vanilla js 创建一个 todoList 应用程序。到目前为止，我已经完成了标记、设计以及添加其他功能，例如将提交的任务添加到 ui、删除任务、将任务标记为已完成。
现在我被困在添加编辑功能上。（当然还有其他事情要做，例如验证、实现 localStorage、添加提醒、使其具有响应性等。）
要实现的目标：
- 用户应该能够点击编辑图标，它应该会变成保存图标，
- 点击编辑图标后，用户应该可以实时编辑文本了
- 最后点击保存图标后，文本不再可编辑，图标应变回编辑图标
我尝试过的一些事情： 点击编辑图标，
- 将
contentEditable=true更改为文本，以便我们可以实时编辑它（任务文本）。 - 将
editBtn替换为saveBtn（新创建的元素）
但是在替换元素后我找不到恢复它的方法。当我尝试使用 eventTarget(我用来存储事件的目标属性的变量) 访问它时，我什么也没得到。我还尝试使用document.querySelector('.save') 抓取它，但这仅适用于文档流程。（我的意思是如果我们单击第二个按钮，在 dom 中第一个按钮会更改）
现在我想要将 saveBtn 替换回 editBtn 并将 contentEditable 更改回 false 或继承
这是处理 ui 事件的函数：
static taskEvents(eventTarget) {
const targetClassName = eventTarget.classList
if(targetClassName.contains('complete')) {
targetClassName.toggle('statusIcon');
eventTarget.parentElement.nextElementSibling.classList.toggle('task');
}
else if(targetClassName.contains('edit')) {
// let textEditableStatus = eventTarget.parentElement.parentElement.previousElementSibling;
// textEditableStatus.contentEditable=true;
// const editBtn = eventTarget.parentElement
// const saveBtn = document.createElement('a');
// saveBtn.className = "btn";
// saveBtn.id = "saveBtn";
// saveBtn.innerHTML = '<i class="fas fa-save save"></i>';
// editBtn.replaceWith(saveBtn)
}
else if(targetClassName.contains('delete')) {
eventTarget.parentElement.parentElement.parentElement.remove();
}
}
完整代码：
class UI {
// dummy data; for now.
static displayTasks() {
const tasks = ['Take out trash', 'Do laundry', 'Visit part'];
tasks.forEach(task => UI.addTask(task));
}
static addTask(task) {
const tbody = document.querySelector('#tasks');
const taskRow = document.createElement('tr');
taskRow.className += 'task';
taskRow.innerHTML = `
<td><i class="far fa-check-circle complete"></i></td>
<td>${task}</td>
<td><a href="#" class="btn" id="editBtn"><i class="fas fa-edit edit"></i></a></td>
<td><a href="#" class="btn" id="deleteBtn"><i class="fas fa-trash delete"></i></a></td>
`;
tbody.appendChild(taskRow);
document.querySelector('#todoInput').value = '';
}
static taskEvents(eventTarget) {
const targetClassName = eventTarget.classList
if (targetClassName.contains('complete')) {
targetClassName.toggle('statusIcon');
eventTarget.parentElement.nextElementSibling.classList.toggle('task');
} else if (targetClassName.contains('edit')) {
// let textEditableStatus = eventTarget.parentElement.parentElement.previousElementSibling;
// textEditableStatus.contentEditable=true;
// const editBtn = eventTarget.parentElement
// const saveBtn = document.createElement('a');
// saveBtn.className = "btn";
// saveBtn.id = "saveBtn";
// saveBtn.innerHTML = '<i class="fas fa-save save"></i>';
// editBtn.replaceWith(saveBtn)
} else if (targetClassName.contains('delete')) {
eventTarget.parentElement.parentElement.parentElement.remove();
}
}
}
// Ui events
document.addEventListener('DOMContentLoaded', UI.displayTasks);
const tbody = document.querySelector('#tasks');
tbody.addEventListener('click', event => {
UI.taskEvents(event.target);
}).statusIcon {
font-weight: bold;
color: rgb(48, 158, 81);
}
td.task {
opacity: .6;
text-decoration: line-through;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
<!-- fontawesome script-->
<script src="https://kit.fontawesome.com/39350fd9df.js"></script>
</head>
<body>
<div class="main-container">
<div class="container">
<div class="input-group">
<input type="text" id="todoInput" placeholder="Enter new task...">
<a href="#" class="btn addBtn"><i class="fas fa-plus"></i></a>
</div>
<table class="taskLister">
<thead>
<tr>
<th>Status</th>
<th>Task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tasks"></tbody>
</table>
</div>
</div>
<!-- Custom script -->
<script src="app.js"></script>
</body>
</html>快速说明：我使用的是纯 javascript
【问题讨论】：
-
没有看到代码，我会说：不要使用
innerHTML。innerHTML的唯一用途是将元素设为空并将 HTML 实体添加到无父元素（即未附加到 DOM 的元素）中。 -
@Teemu 代码很长，这就是为什么我一开始没有把它和问题放在一起。但我现在正在重新编辑我的问题。
-
如果你替换一个元素，你还需要替换任何附加的事件处理程序。
-
@KooiInc 我会检查的。
标签： javascript if-statement dom dom-events event-propagation