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

编程问答 2022-06-04

问题描述

我正在创建一个待办事项应用程序。我已将所有任务存储在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;
        }
    });
}

//添加新任务

$("#todoForm").submit(function (e) {
    e.preventDefault();

    text = $("#todoText").val();

    $("#todoText").val("");

    if (!text || /^\s*$/.test(text)) {
        return;
    }

    const task = "<div class='task magenta " + colors[colorIndex] + "' data-id='task'>" +
        "<div class='task-text'>" + text + " </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;
    }
    $("#todoList").append(task);

    var todos;
    if (localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }

    todos.push(text);

    //set to localstorage
    localStorage.setItem("todos",JSON.stringify(todos));
});

//完成任务

$(document).on("click",".compTask",function (e) {
    $(this).parent().parent().toggleClass("complete");
    var btnClass = "";
    if ($(this).children("i").hasClass("far")) {
        $(this).children("i").removeClass("far");
        $(this).children("i").addClass("fas");
        btnClass = "fas";
    } else {
        $(this).children("i").removeClass("fas");
        $(this).children("i").addClass("far");
        btnClass = "far";
    }
});

//删除任务

//这是实际的问题

    $(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("Breakfast")时，就可以了，但是在我的程序中，它给出-1;

todos之后的["Wake up early","Breakfast","Study","Game","Lunch"]看起来像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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

arraysarraysgrepindexofjavascriptjquery