时间戳

首页 > 解决方案 > 如何使我现有的列表项在我的“待办事项列表”中可编辑并重新保存

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

问题描述

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

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

链接到 HTML 示例代码：查看源代码：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>

I need to get it to where when you click on the existing item in the list once it will allow you change what that item says, and when you hit enter or click off of the item it saves the change of that item.

标签： javascriptjqueryhtmlcss

解决方案

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

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

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";

推荐阅读