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

Question

如果这个问题很简单，我先道歉，我知道我几乎得到了答案，但我只是运行不知道如何去做。我将 link 留给故障项目（将其复制粘贴到那里），以便您可以更好地了解我想做什么。

这是 link：https://glitch.com/edit/#!/skitter-aftermath?path=index.html:9:7

基本上，“添加待办事项”按钮确实会显示 "Added todo item!" 通知，但它会在每隔一秒添加的项目上显示（我在 .toggle 上有它，因为我找不到 .add 的解决方案& .remove 两者都起作用），而删除待办事项按钮仅在删除一个待办事项时显示其通知，在它不显示的所有其他已删除项目上。提前致谢！

P.S。这是上面 link 中引用通知的代码部分：

//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 (?)
    });

Answer 1

这是 CSS 动画的问题，您基本上需要重新触发动画，您可以通过删除 class 然后添加它来实现。但这不起作用，除非你在两者之间睡一觉。

但是有一个技巧，你可以通过询问元素的 offsetWidth 来引起文档重排。

下面是一个例子。

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

ps。每次尝试切换都有效的原因是因为第一次切换会继续，下一次关闭，然后再次打开导致动画重新启动..

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

Button clicked does its function only once when it needs to do it for each item

javascript

function

button

reset