如何使我现有的列表项在我的“待办事项列表”中可编辑并重新保存[重复]答案

【问题标题】：How to make my existing list items editable in my "To-Do List" and resaved [duplicate]如何使我现有的列表项在我的“待办事项列表”中可编辑并重新保存[重复]
【发布时间】：2023-03-07 00:09:01
【问题描述】：

我正在使用 JavaScript 和 jQuery（以及 HTML 和 CSS）基于 JavaScript 书籍第 7 章代码示例中的代码示例创建一个待办事项列表应用程序。

本书第7章链接：http://javascriptbook.com/code/c07/

链接到 HTML 示例代码：view-source:http://javascriptbook.com/code/c07/example.html

链接到 JS 示例代码：http://javascriptbook.com/code/c07/js/example.js

从 JS 示例代码链接到 jQuery 代码：http://javascriptbook.com/code/c07/js/

在给定的代码示例中，它仅满足分配的 4 个总要求中的 1 个，即能够添加 jquery-1.11.0.js 列表中的一个元素。它缺少的要求是：编辑现有元素，删除已完成的元素或所有已完成的元素，以及将元素标记为已完成并且还能够将其取消标记为已完成。

实现 jQuery / JavaScript 代码来执行这些任务让我非常困惑，因为这是我第一次这样做。对于标记已完成的要求，我认为最好是在单击现有项目时通过一条线显示它已完成，并且在第二次单击时该线将消失，这意味着它将被标记为再次未完成。我只是在想办法让我能够完成所有这些要求，但我不知道在 JavaScript / jQuery 中我必须采取的第一步是什么。

我试图研究如何使列表项可编辑，但我没有找到任何有用的信息来说明如何做到这一点以满足最低要求。

  <ul>
      <!-- List of Items -->
    <li id="one" class="hot"><em>fresh</em> figs</li>
    <li id="two" class="hot">pine nuts</li>
    <li id="three" class="hot">honey</li>
    <li id="four">balsamic vinegar</li>
  </ul>

当您单击列表中的现有项目时，我需要将它带到哪里，一旦它允许您更改该项目的内容，并且当您按 Enter 或单击该项目时，它会保存对该项目的更改。

【问题讨论】：

欢迎来到 SO。不幸的是，您的问题太广泛了。你需要把任务分解成小块，然后提出一个具体的、有针对性的问题。请参阅How to ask a good question。

标签： javascript jquery html css

【解决方案1】：

解决这个问题的方法不止一种。

您可以通过以下方式编辑列表中的每个元素：

contenteditable="true"

例子：

<li id="one" contenteditable="true" class="hot"><em>fresh</em> figs</li>

或者您可以使列表本身可编辑：

<ul id="editableList" contenteditable="true" class="list">

要保存列表，您可以使用 onblur：

<ul id="editableList" contenteditable="true" class="list" onblur="saveContenteditable()">

至少我们需要一个简单的函数来保存一切（javascript）：

   function saveContenteditable(){
     var xr = new XMLHttpRequest();
     var url = "save.php";
     var text = document.getElementById("editableList").innerHTML;
     var vars = "changList="+text;        
     xr.open("POST", url, true);
     xr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xr.send(vars);
 }

这会将更改发送到 php 脚本 (save.php)。

$saveList = $_POST["changeList"];echo "$saveList";

【讨论】：