搜索
搜索

JavaScript中的待办事项列表-删除任务后，您将无法正确选择其他任务

Plamen Dobrev 发表于 Dev
17
普拉门·杜波夫（Plamen Dobrev）

这是我的第一个大项目，我正在做一个待办事项清单，到目前为止一切工作都进行得很顺利，但是我只是注意到一个非常不愉快的问题。因此，我决定通过单击一个选项来编辑任务-您将获得诸如上下移动，重命名甚至删除之类的选项。我测试了删除功能，事实证明，它无法按预期工作。当我第一次删除任务时，一切正常。这是待办事项清单。让我们删除任务“ 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。

这些都不起作用。

普拉门·杜波夫（Plamen Dobrev）

因此，如果有人遇到类似的问题并设法以某种方式查看本文，以下是我提出的一个主意（尽管如果可行，我不是100％，但会显示时间），我将尝试解释为什么列出不能正常工作。因此，假设我们删除索引为[3]的任务。也许包括我在内的某些人现在希望列表是这样：[0]，[1]，[2]，[4]。但是任务[4]必须返回并占据空白位置。任务[5]必须代替[4]。老实说，这使我感到困惑，但这是我唯一剩下的想法。我什至无法想象，但我可能走了正确的路...

那我该怎么办？

  • 而不是删除元素，而是这样设置：style.display = 'none'我没有删除它，只是使其不可见，因此，点[3]仍不为空，其他任务必须保留在原处。
  • 尽管如此，我还是想完全删除这些任务，以使我的列表实际上不包含不需要的或已完成的任务。由于我添加了关闭此列表的选项-每次关闭它时，我都选择具有该类名称和display:none属性的所有任务，然后将其删除。下次打开列表时，这不会影响列表，因为所有计数器都应重置。

更新（13.04.2020）：

因此，不幸的是，如果您想实现诸如移动任务之类的功能，则上述方法会带来一些不良后果。这也不是最好的选择。我想与社区分享我的进步和知识，所以我很高兴向您展示我的新解决方案：

function editTasks() {
    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() {
                document.getElementsByClassName('regTask')[rememberThisTaskValue].remove();
                            var nodes = listTaskViewer.childNodes;
                            for (var j = 0; j < nodes.length; j++) {
                                nodes[j].setAttribute('class', 'newSavedTask regTask');
                                nodes[j].style.animation = 'none';
                                nodes[j].style.opacity = '1';
                            }
                            localStorage.setItem("taskListSave", listTaskViewer.innerHTML);
                            listTaskViewer.innerHTML = 'none';
                            var theTasks = document.querySelectorAll('.regTask');
                            for (var s = 0; s < theTasks.length; s++) {  
                                theTasks[s].style.animation = 'none';
                            }
                            listTaskViewer.innerHTML = localStorage.getItem("taskListSave");
                            for (var y = 0; y < savedTasks.length; y++) {
                                savedTasks[y].onmouseover = function() {
                                    this.style.background = 'rgba(255, 255, 255, 1)';
                                }
                                savedTasks[y].onmouseout = function() {
                                    this.style.background = 'rgba(255, 255, 255, 0.7)';
                                }
                                editTasks();
                            }
                            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';
                            stipText.style.animation = 'tipFadeIn 0.18s forwards';
                            setTimeout (function() {
                                temporaryLayer.style.animation = 'none';
                                temporaryLayer.style.background = 'none';
                                temporaryLayer.style.backdropFilter = 'none';
                                editor.remove();
                                temporaryLayer.remove();
                            }, 180)
            }
            ...
}

那么...如何运作？好吧，很重要的一点是要再次删除任务，而不仅仅是将其显示属性设置为none。如您所见，现在整个代码块都在一个名为的函数内部editTasks()，这在编写任务删除函数时非常重要。删除任务后，该列表将保存到与我到目前为止用于保存任务并再次将保存的值附加到div相同的localStorage值下；该列表基本上已重新加载，有点像页面刷新。我已经知道这样的刷新可以解决问题，但是我不知道如何有目的地/不执行该操作而又不使用户关闭并再次打开列表，以便他们可以删除一些任务。刷新完成后，editTasks()函数将被调用并为任务提供新索引，这将有助于列表在单击时正确选择任务。剩下的代码只是一些样式，并与动画配合使用，以避免在我的应用程序中造成混淆或外观怪异的行为。这并不是真正重要的事情，因为并非所有列表都像这样工作，而是列表中存在的一些设计功能。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

删除待办事项列表中的待办事项后如何重置ID号？

如何使我的 Javascript 待办事项列表中的任务出现在新列表项上？

使用纯JavaScript删除待办事项列表中的列表项

如何从 Laravel 的列表中删除待办事项列表项？

无法从待办事项列表中删除div

无法从待办事项列表中删除li

Javascript待办事项列表删除和完成按钮

在反应中删除待办事项列表中的项目

如何删除待办事项列表中的div？

如何显示待办事项列表中的删除按钮

从数组中删除元素（待办事项列表应用）

如何从我的待办事项列表中删除项目

添加待办事项列表任务

使用Javascript从待办事项清单中删除项目

无法使用 react 和 redux 在待办事项列表中添加待办事项。我究竟做错了什么？

删除按钮未显示在待办事项列表中的某些任务上

如何使用 Angular 5 删除待办事项列表中的多个任务

构建可使用 append 的待办事项列表网站，在 javascript 中删除笔记时遇到问题

如何使用复选框完成待办事项列表中的任务？

流星待办事项的关联列表和任务

localStorage 用于保存待办事项列表的任务

如何使用按钮删除通过JavaScript添加的“待办事项”列表项

JavaScript待办事项列表-删除按钮仅显示在添加的最新项目上

从ReactJS中的待办事项列表中删除记录给出错误

JavaScript在待办事项列表项目中无法正常工作

我试图使用 javascript 制作待办事项列表，但无法附加选定的选项

在控制台中删除待办事项列表，但不会从屏幕中删除

我如何从待删除的待办事项应用程序中删除列表？

待办事项列表删除按钮无法正常工作

TOP 榜单

  1. 1

    隐藏发件人没有短信PHP

  2. 2

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    flask-admin 如何自定义删除按钮

  5. 5

    在浏览器中请求URL时会发生什么？

  6. 6

    材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

  7. 7

    为什么PlusShare.Builder setRecipients方法不起作用？

  8. 8

    OS X-为什么我需要打开WiFi才能确定最近的位置

  9. 9

    在Windows 7中无法删除文件（2）

  10. 10

    android 背部按下

  11. 11

    Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象

  12. 12

    PyQt4.QtCore模块无法向sip模块注册

  13. 13

    用白色图像隐藏Android Studio中的所有textView

  14. 14

    为什么随机森林中的平均降低基尼系数取决于人口规模？

  15. 15

    应用发明者仅从列表中选择一个随机项一次

  16. 16

    正则表达式，用于查找所有以任何字母开头和数字开头的文件

  17. 17

    ArgumentError：错误＃2109：在场景默认设置中未找到默认的帧标签

  18. 18

    sshd AllowGroups组未授予访问权限

  19. 19

    jQuery无限滚动固定div中的滚动

  20. 20

    无法加载文件或程序集System.Runtime.CompilerServices.Unsafe

  21. 21

    Jqgrid：多级别组摘要

热门标签

归档