Javascript 单击的按钮仅在需要为每个项目执行功能时执行一次

如果这个问题很简单，我很抱歉，我知道我几乎得到了答案，但我只是没有办法解决。我将留下一个指向glitch项目的链接（复制粘贴在那里），这样您就可以更好地了解我想做什么

以下是链接：

基本上，“添加待办事项”按钮确实会显示“添加待办事项！”通知，但它每秒钟都会显示一次添加的事项（我启用了.toggle，因为我找不到.Add和.remove的解决方案以同时使用这两个选项），而“删除待办事项”按钮只会在删除一个待办事项时显示其通知，其他删除的事项则不会显示。提前谢谢

注意：以上链接中包含的代码部分涉及通知：

//Show an added notice when clicked Add Todo
    createAddedNotice:function(){
        var itemAdded = document.getElementById("added");
        itemAdded.classList.toggle("addedShow");
    },
    //Show completed notice when the list item is toggled as completed
    createCompletedNotice: function(){
        var itemCompleted = document.getElementById("completed");
        itemCompleted.classList.toggle("finished");
    },
    //Show deleted notice when the list item is deleted
    createDeletedNotice: function(){
        var itemDeleted = document.getElementById("deleted");
        itemDeleted.classList.add("deletedShow");
    },
    //Show toggled all notice when all list items are toggled by pressing TOGGLE ALL button
    createToggledAllNotice:function(){
        var allCompleted = document.getElementById("allCompleted");
        allCompleted.classList.toggle("allCompletedShow")
    },
    //Show deleted all notice when all list items are toggled by pressing DELETE ALL button
    createDeletedAllNotice: function(){
        var allDeleted = document.getElementById("allDeleted");
        allDeleted.classList.toggle("allDeletedShow");
    },
    //
    setUpEventListeners: function(){
        var todosUl = document.querySelector("ul");
        todosUl.addEventListener("click", function(event){
            var elementClicked = event.target;
            if(elementClicked.className === "deleteBtn"){
                handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
            }
            //If the delete button is clicked, show the deleted notice
            if(elementClicked.className === "deleteBtn"){
                view.createDeletedNotice();
            }
            if (elementClicked.className === "toggleBtn") {
                todoList.toggleCompleted(parseInt(elementClicked.parentNode.id));
                var itemCompleted = document.getElementById("completed");
                itemCompleted.classList.remove("finished");
                view.displayTodos();
            }
            //If the completed button is clicked then show the completed notice
            if( elementClicked.className === "toggleBtn"){
                view.createCompletedNotice();
            }

            //If addTodo button is clicked, then remove the class (?)
    });

---

这是CSS动画的一个问题，您基本上需要重新触发动画，您可以通过删除类然后添加它来实现。但除非你在中间休息，否则这是行不通的

但是有一个技巧，您可以通过询问元素它的offsetWidth来导致文档回流

下面是一个例子

createAddedNotice:function(){
    var itemAdded = document.getElementById("added");
    itemAdded.classList.remove("addedShow");
    itemAdded.offsetWidth; //document reflow
    itemAdded.classList.add("addedShow"); 
},

---

ps.之所以每秒切换一次都有效，是因为第一次切换会打开，下一次切换会关闭，然后再次打开，导致动画重新启动。

非常感谢，这就成功了！我把头撞到墙上，不知道为什么它不会重置，或者我应该把它放在哪里。移除，从来没有想到过这样的事情，即使我更有经验哈：D是的，我发现开关基本上是指开/关按钮，在我搜索这个时把它放在那里：D谢谢！没问题，是的，有些问题看起来很奇怪。我想说的是，事情不像以前那么糟了，出现了一些小故障，。诸如此类……）