javascript - JavaScript 中的待办事项列表 - 删除任务后，您无法正确选择另一个任务
问题描述
这是我的第一个大项目，我正在制作一个待办事项清单，到目前为止一切都很顺利，但我只是注意到一个非常不愉快的问题。因此，我决定通过单击来创建一个选项来编辑任务 - 你可以选择上下移动、重命名甚至删除它。我测试了删除功能，结果发现它没有按预期工作。当我第一次想删除任务时，一切正常。 这是待办事项清单。让我们删除任务“d” 单击任务后，将打开此菜单： 让我们单击“删除” 瞧！任务没了。让我们删除另一个。比如...下一个，例如。 让我们点击任务“f” 然而，正如你所看到的......而不是“f”，“ 总之，删除一项任务后，再次尝试删除一项任务会导致无法正确选择您想要的任务。您不是处理选定的任务，而是处理它之后的任务。为什么会这样？任何帮助表示赞赏！提前致谢！
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
rememberThisTaskValue = h;
}
})(q))
}
var allTasks = document.getElementsByClassName('regTask');
for (var b = 0; b < allTasks.length; b++) {
allTasks[b].onclick = function() {
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgb(255, 255, 255)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgb(255, 255, 255)';
}
alert(rememberThisTaskValue);
temporaryLayer.style.animation = 'layerFadeIn 0.18s forwards';
temporaryLayer.style.background = 'rgba(0, 0, 0, 0.5)';
temporaryLayer.style.backdropFilter = 'blur(6px)';
body.appendChild(temporaryLayer);
var editor = document.createElement('div');
var editorTitle = document.createElement('h1');
var editorTitleNode = document.createTextNode('Edit task');
var editorSubTitle = document.createElement('h2');
// Styling
var editorSubTitleTextNodeContent = document.getElementsByClassName('regTask')[rememberThisTaskValue].innerHTML;
var editorSubTitleNode = document.createTextNode(editorSubTitleTextNodeContent);
var editorOptions = document.createElement('div');
var editorOptionsInput = document.createElement('input');
var editorOptionsDelete = document.createElement('button');
var editorOptionsDeleteNode = document.createTextNode('Delete');
var editorOptionsMove = document.createElement('button');
var editorOptionsMoveNode = document.createTextNode('Move');
var editorOptionsRename = document.createElement('button');
var editorOptionsRenameNode = document.createTextNode('Rename');
var editorOptionsCancel = document.createElement('button');
var editorOptionsCancelNode = document.createTextNode('Cancel');
// Styling
temporaryLayer.appendChild(editor);
editor.appendChild(editorTitle);
editorTitle.appendChild(editorTitleNode);
editor.appendChild(editorSubTitle);
editorSubTitle.appendChild(editorSubTitleNode);
editor.appendChild(editorOptions);
editorOptions.appendChild(editorOptionsRename);
editorOptionsRename.appendChild(editorOptionsRenameNode);
editorOptions.appendChild(editorOptionsMove);
editorOptionsMove.appendChild(editorOptionsMoveNode);
editorOptions.appendChild(editorOptionsDelete);
editorOptionsDelete.appendChild(editorOptionsDeleteNode);
editorOptions.appendChild(editorOptionsCancel);
editorOptionsCancel.appendChild(editorOptionsCancelNode);
editorOptionsCancel.onclick = function() {
// There is some styling here too but I am going to leave it just in case
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
editorOptionsDelete.onclick = function() {
// This is the function that deletes a task
document.getElementsByClassName('regTask')[rememberThisTaskValue].remove();
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
var rememberThisTaskValue = h;
}
})(q))
}
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
}, 180)
}
editorOptionsRename.onclick = function() {
editor.style.animation = 'editorFadeOut 0.18s forwards';
setTimeout (function() {
editor.remove();
}, 180)
var nameChanger = document.createElement('div');
nameChanger.style.opacity = '0';
nameChanger.style.animation = "renameFadeIn 0.18s forwards";
var nameChangerTitle = document.createElement('h1');
var nameChangerTitleNode = document.createTextNode('Rename Task');
var nameChangerForm = document.createElement('form');
var nameChangerFormInput = document.createElement('input');
var nameChangerFormSubmit = document.createElement('button');
var nameChangerFormSubmitNode = document.createTextNode('Rename');
var nameChangerFormCancel = document.createElement('button');
var nameChangerFormCancelNode = document.createTextNode('Cancel');
// Styling
temporaryLayer.appendChild(nameChanger);
nameChanger.appendChild(nameChangerTitle);
nameChangerTitle.appendChild(nameChangerTitleNode);
nameChanger.appendChild(nameChangerForm);
nameChangerForm.appendChild(nameChangerFormInput);
nameChangerForm.appendChild(nameChangerFormSubmit);
nameChangerFormSubmit.appendChild(nameChangerFormSubmitNode);
nameChangerForm.appendChild(nameChangerFormCancel);
nameChangerFormCancel.appendChild(nameChangerFormCancelNode);
document.getElementById('taskRenameField').focus();
nameChangerFormCancel.onclick = function() {
event.preventDefault();
nameChanger.style.opacity = '1';
nameChanger.style.animation = 'changerFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
nameChanger.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
nameChangerFormSubmit.onclick = function() {
event.preventDefault();
if (!(nameChangerFormInput.value === "" || (!nameChangerFormInput.value.replace(/\s/g, '').length))) {
var taskReminder = nameChangerFormInput.value.replace(/\s+/g, " ").trim();
document.getElementsByClassName('regTask')[rememberThisTaskValue].innerHTML = taskReminder;
nameChanger.style.opacity = '1';
nameChanger.style.animation = 'changerFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
nameChanger.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
}
}
editorOptionsMove.onclick = function() {
// This is the function that lets the user move elements but it's still unfinished, I barely started it
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
stipText.style.animation = 'tipFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
// Switch by clicking second task.
}
}
}
我试过的： - 使用不同的变量名 - 删除列表并立即再次放入页面。我想以这种方式重置计数器并使列表再次正常工作。- 实现一个变量，指示任务是否已被删除。如果此变量为正，则rememberThisTaskValue变量减 1。
但是，这些都不起作用。
解决方案
删除值时，事件侦听器和单击事件可能不再同步。最好将所有工作放在一个事件侦听器中，以防止出现差异。
我建议删除这块：
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
rememberThisTaskValue = h;
}
})(q))
}
然后只使用 for 循环的索引作为索引而不是rememberThisTaskValue
document.getElementsByClassName('regTask')[b].remove();
推荐阅读
- twilio - Twilio 是 SMS 聚合器还是 SMS 软件服务提供商？
- powershell - 将每个文件夹移动到顶层，包括在 Powershell 中递归的内容
- go - 谷歌 SMTP 服务器失败
- java - LWJGL - 顶点/片段着色器不工作
- javascript - NodeJS从请求转发图像
- javascript - 一步创建元素并分配类
- javascript - Vuex axios调用无法处理422响应
- php - Mac M1 无法将 PHP 8.0 映射为 PhpStorm 中的 CLI 解释器
- sql - 数据连接向导未加载
- java - Rest Template Exchange 不在 docker 容器内工作，但在外部工作