Javascript grep（）和indexOf（）函数在字符串数组中不起作用_Javascript_Jquery_Arrays_Grep_Indexof

Javascript grep（）和indexOf（）函数在字符串数组中不起作用

javascript jquery arrays grep

Javascript grep（）和indexOf（）函数在字符串数组中不起作用,javascript,jquery,arrays,grep,indexof,Javascript,Jquery,Arrays,Grep,Indexof,我正在创建一个待办事项应用程序。我已将所有任务存储在localStorage中。当需要删除任务时，我希望从localStorage获取阵列中的任务，删除特定任务，然后再次将新阵列存储到localStorage中但是对于需要删除的任务，indexOf（）函数总是返回-1，并且grep（）方法都不会删除该任务实际上，这些方法在数组中找不到任务，但它就在那里，我不知道为什么会发生这种情况这是我的密码 $(document).ready(function () { $("#todoTe

我正在创建一个待办事项应用程序。我已将所有任务存储在localStorage中。当需要删除任务时，我希望从localStorage获取阵列中的任务，删除特定任务，然后再次将新阵列存储到localStorage中

但是对于需要删除的任务，indexOf（）函数总是返回-1，并且grep（）方法都不会删除该任务

实际上，这些方法在数组中找不到任务，但它就在那里，我不知道为什么会发生这种情况

这是我的密码

$(document).ready(function () {
$("#todoText").focus();

colors = ["red", "lightgreen", "yellow", "green", "cyan"];
colorIndex = 0;

//如果任务已经存在，则显示任务

if (localStorage.getItem("todos")) {
    todos = JSON.parse(localStorage.getItem("todos"));
    todos.forEach(todo => {
        $("#todoList").append(
            "<div class='task magenta " + colors[colorIndex] + "' data-id='task'>" +
            "<div class='task-text'>" + todo + " </div >" +
            "<div class='btn'>" +
            "<button class='compTask'><i class='far fa-check-circle'></i></button> " +
            "<button class='delTask'><i class='far fa-trash-alt'></i></button> " +
            "</div> " +
            "</div > "
        );
        colorIndex++;
        if (colorIndex >= 5) {
            colorIndex = 0;
        }
    });
}

//删除任务

//这是实际问题

    $(document).on("click", ".delTask", function (e) {
        var todos;
        if (localStorage.getItem("todos") === null) {
            todos = [];
        } else {
            todos = JSON.parse(localStorage.getItem("todos"));
        }
        const deleteText = $(this).parent().parent().children(".task-text").text();

        todos = todos.splice(todos.indexOf(deleteText), 1);
        
        /* todos = $.grep(todos, function(item){
            return item != deleteText;
        }); */

        todos = todos.filter()
        console.log(todos);
        
        localStorage.setItem("todos", JSON.stringify(todos));
        
        $(this).parent().parent().animate({
            height: 0,
            padding: 0,
            width: 0
        }, 700, () => {
            $(this).parent().parent().remove();
        });
    });
 });

当我在浏览器控制台中执行
todos.indexOf（“早餐”）
操作时，它很好，但从程序中它给出-1
一个
todos
看起来像
[“早起”、“早餐”、“学习”、“游戏”、“午餐”]
在
JSON.parse（localStorage（“todos”））之后 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vanilla Todo</title> <script src="https://kit.fontawesome.com/0552b63fc2.js" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script src="js/main.js"></script> </head> <body> <div class="todo-container"> <div class="todo"> <div class="todo-title">TODO</div> <div class="todo-form"> <p>What's the task ??</p> <form id="todoForm"> <input type="text" class="todo-text" id="todoText" placeholder="Add task..."> <button class="add-btn" id="add"><i class="fas fa-plus"></i></button> </form> </div> <div class="todo-list" id="todoList"></div> </div> </div> </body> </html> 香草托多待办事项任务是什么如果硬编码字符串有效，则deleteText 不是您所认为的。请添加todos Please的帖子示例。你能确定它是否是一个字符串数组吗？请同时共享HTML，以便很容易识别问题。@Andreas我试图添加，但它产生了一个本地存储错误。谢谢@Aakif，这解决了问题。在您的评论之后，我还发现将“+text+” 更改为“+text+” 也可以解决问题。这就是为什么我会得到一个尾随空格。如果硬编码字符串有效，那么deletetetext 就不是你想象的那样了。请添加todos Please的帖子示例。你能确定它是否是一个字符串数组吗？请同时共享HTML，以便很容易识别问题。@Andreas我试图添加，但它产生了一个本地存储错误。谢谢@Aakif，这解决了问题。在您的评论之后，我还发现将“+text+” 更改为“+text+”也可以解决问题。这就是为什么我会得到一个尾随空格。 $(document).on("click", ".delTask", function (e) { var todos; if (localStorage.getItem("todos") === null) { todos = []; } else { todos = JSON.parse(localStorage.getItem("todos")); } const deleteText = $(this).parent().parent().children(".task-text").text(); todos = todos.splice(todos.indexOf(deleteText), 1); /* todos = $.grep(todos, function(item){ return item != deleteText; }); */ todos = todos.filter() console.log(todos); localStorage.setItem("todos", JSON.stringify(todos)); $(this).parent().parent().animate({ height: 0, padding: 0, width: 0 }, 700, () => { $(this).parent().parent().remove(); }); }); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vanilla Todo</title> <script src="https://kit.fontawesome.com/0552b63fc2.js" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script src="js/main.js"></script> </head> <body> <div class="todo-container"> <div class="todo"> <div class="todo-title">TODO</div> <div class="todo-form"> <p>What's the task ??</p> <form id="todoForm"> <input type="text" class="todo-text" id="todoText" placeholder="Add task..."> <button class="add-btn" id="add"><i class="fas fa-plus"></i></button> </form> </div> <div class="todo-list" id="todoList"></div> </div> </div> </body> </html>