Question

我需要创建一个学校项目的任务板网站，并且需要具有仅删除单击的笔记之一的功能。下面的代码有一些概述-用户输入一个值，一个函数将这些值放入一个对象中，该对象被放入数组中，然后保存在本地存储中（使用项目所需要的，只是提及）。保存值之后，该函数在数组上运行For循环，并在其上打印带有值的注释。这对我来说很好。使用删除功能应该朝什么方向发展？任何帮助或一般指导将不胜感激，因为我觉得自己确实在为应该相当简单的事情而苦苦挣扎。

// local storage function

var taskArray = [];

$(document).ready(function loadNotes() {
  if (localStorage.getItem("user tasks") === null) {
    console.log("local storage is empty");
    var alertDiv = document.getElementById("addAlert")
    alertDiv.innerHTML +=
      `
        <div class="alert alert-success alert-dismissable show hide">
          <strong>Welcome to our task board!</strong> Enter your task, and the app will keep track of it for you, even if you leave the page!
        </div>
    `
  } else {
    var mainDiv = document.getElementById("maindiv");
    var arrayFromStorage = localStorage.getItem('user tasks');
    arrayFromStorage = JSON.parse(arrayFromStorage);
    $("#maindiv").empty();
    for (var index = 0; index < arrayFromStorage.length; index++) {
      mainDiv.innerHTML +=
        `
        <span class="relative">
        <img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
        <span class="centerOnNote" id="textspan" onclick="deleteNote(this)">
        <span class="fas fa-times-circle"></span>
        <br>
        Your task = ${arrayFromStorage[index].name}
        Complete by = ${arrayFromStorage[index].date}
      </span>
   `
    }
  }
})

function saveToLocalStorage() {
  debugger;

  var taskName = document.getElementById("task").value;
  var taskDate = document.getElementById("date").value;

  var task = {
    name: taskName,
    date: taskDate
  }


  taskArray.push(task);
  var arrayToString = JSON.stringify(taskArray);
  localStorage.setItem("user tasks", arrayToString);
  var mainDiv = document.getElementById("maindiv");
  var arrayFromStorage = localStorage.getItem('user tasks');
  arrayFromStorage = JSON.parse(arrayFromStorage);
  $("#maindiv").empty();
  for (var index = 0; index < arrayFromStorage.length; index++) {
    mainDiv.innerHTML +=
      `
        <span class="relative">
          <img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
          <span class="centerOnNote" id="textspan" onclick="deleteNote(this)">
          <span class="fas fa-times-circle"></span>
          <br>
          Your task = ${arrayFromStorage[index].name}
          Complete by = ${arrayFromStorage[index].date}
        </span>
      `

  }
}

function deleteNote(note) {
  
}

.background-image {
  background-image: url("../assets/images/wallpaper/chalkboard.jpg");
  background-size: 100%;
}

.pageheader {
  color: white;
  text-align: center;
  padding: 30px;
  font-size: 80px;
}

.centerInput {
  margin: 10px 25px 30px 25px;
}

.imgContainer {
  width: 70%;
  margin: auto;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fade-in.start {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.imgSpacing {
  padding: 2% 2% 2% 35px;
  margin: auto;
  position: relative;
}

.relative {
  position: relative;
} 

.centerOnNote {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -45%);
  overflow-y: scroll;
  overflow-x: hidden;
}

#textspan {
  width: 150px;
  height: 160px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
    crossorigin="anonymous">
  <title></title>
</head>

<body class="background-image">
  <h1 class="pageheader">My Task Board</h1>
  <form class="" action="index.html" method="post">
    <div class="container">
      <div class="row">
        <input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task">
        <input type="date" class="form-control col-sm centerInput" id="date" value="">
      </div>
      <div class="form-group">
        <input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()">
      </div>
      <div class="form-group">
        <input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form">
      </div>
      <div id="addAlert">

      </div>
    </div>
  </form>
  <!-- style="width: 70%; margin: auto; position: relative;" -->
  <div class="imgContainer" id="maindiv">
      
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
</body>

</html>

Answer 1

通过当前的this，而不是将deleteNote传递给index并不会真正帮助您，

  onclick="deleteNote(${index})"

这样，您可以.splice()从数组中取出该索引，然后将其重新呈现/保存到localStorage。

PS：虽然字符串构建不是最优雅的版本，但是您可以使用DOM API和.addEventListener。

制作JS函数以删除特定元素

1 个答案: