时间戳

首页 > 解决方案 > 如何在另一个函数中传播一个函数？

javascript - 如何在另一个函数中传播一个函数？

问题描述

几乎完成了这个 todoApp： https ://jsfiddle.net/cpbt9dm7/

除了我有一个删除项目的功能（左侧的侧边栏）之外，一切都很好

function deleteProject(){
    let allRemoveButtons = document.querySelectorAll('.delete-button');
    allRemoveButtons.forEach(function(el){
        el.addEventListener('click', function(){
            console.log(el.dataset.name);
            projectStorage.splice(el.dataset.name, 1);
            localStorage.setItem("items", JSON.stringify(projectStorage));
            location.reload();
        })
    })
}

该功能只工作一次，它基本上不会为每个项目删除按钮传播。

如果我只添加一个项目，我可以删除它；如果我添加 2 个项目，我只能删除 1 个，不管是哪一个；如果我添加超过 2 个项目，我仍然可以只删除 1 个项目。

我在创建项目的函数内部调用该函数：

function populateProjects(){
    let newDiv = document.createElement("div");
    newDiv.classList = "eachproject";
    newDiv.dataset.name = projectStorage[projectStorage.length - 1].dataset;

    let newButton = document.createElement('button');
    newButton.classList = "list-button";
    newButton.dataset.name = projectStorage[projectStorage.length - 1].dataset;
    newButton.innerHTML = projectStorage[projectStorage.length -1].title
    newButton.style.background = projectStorage[projectStorage.length -1].priority;

    let newSpan = document.createElement('span');
    newSpan.innerHTML = projectStorage[projectStorage.length -1].date
    newSpan.style.float = "right"
    let deleteButton = document.createElement('button')
    deleteButton.classList = 'delete-button'
    deleteButton.innerHTML = '<i class="fas fa-trash"></i>'
    deleteButton.dataset.name = projectStorage[projectStorage.length - 1].dataset;


    document
    .querySelector(".projects")
    .appendChild(newDiv)
    .appendChild(newButton)
    document
    .querySelector(".projects")
    .appendChild(newDiv)
    .appendChild(newSpan)
    document
    .querySelector('.projects')
    .appendChild(newDiv)
    .appendChild(deleteButton)    


    deleteProject();
}

标签： javascriptlocal-storage

解决方案

问题可能出在您的splice(). 第一个参数是数组的整数索引（参见：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice ）。您可以获取数据集名称的索引，然后在拼接中使用它。例如

var itemIndex = projectStorage.indexOf(el.dataset.name);
projectStorage.splice(itemIndex, 1);

或者，您可以使用过滤器创建一个删除数据集名称的新数组：

var newProjectStorage = projectStorage.filter(project => project.dataset !== el.dataset.name);

推荐阅读