Javascript 如何使现有列表项在“待办事项列表”中可编辑并重新保存

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

链接至本书第7章：

链接到HTML示例代码：查看源代码：

链接到JS示例代码：

从JS示例代码链接到jQuery代码：

在给定的代码示例中，它只满足分配的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键或单击off键时，它会保存该项目的更改。

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

您可以使用以下工具使列表中的每个元素都可编辑：

contenteditable="true"

例如：

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

这将把更改发送到php脚本save.php

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

---

欢迎来到SO。不幸的是，你的问题太宽泛了。你需要把任务分成几部分，然后带着一个具体的、有重点的问题回来。请看。

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

   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);
 }

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