时间戳

首页 > 解决方案 > grep() 和 indexOf() 函数在字符串数组中不起作用

javascript - grep() 和 indexOf() 函数在字符串数组中不起作用

问题描述

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

A之后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>

标签： javascriptjqueryarraysgrepindexof

解决方案

推荐阅读