8-2 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现网页留言的编辑功能，每条留言中都会带有一个编辑按钮，点击编辑按钮的时候，可以对相应留言内容进行编辑。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、为每个编辑按钮按钮添加点击事件，记录当前编辑的节点，并更新输入框状态。

  提示:
  1. 取得当前编辑按钮的父节点
  2. 把父节点保存在变量cur
  3. 把父节点的第一个子节点的内容写入输入框
  4. 显示输入框 

二、输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点。

  提示:
  1. 取得输入框的内容
  2. 如果内容为空，则返回
  3. 把cur的第一个子节点的innerHTML改为输入框内容
  4. 隐藏输入框 
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             padding: 20px;
  13.         }
  14.         #list {
  15.             list-style: none;
  16.             width: 400px;
  17.             border: 1px solid #666666;
  18.         }
  19.         li {
  20.             list-style: none;
  21.             background: #a7cbff;
  22.             margin: 10px 0;
  23.             height: 30px;
  24.             position: relative;
  25.         }
  26.         li button {
  27.             display: none;
  28.             position: absolute;
  29.             right: 3px;
  30.             top: 3px;
  31.         }
  32.         li:hover button {
  33.             display: inline-block;
  34.         }
  35.         textarea {
  36.             display: block;
  37.             width: 400px;
  38.             height: 50px;
  39.             margin: 10px 0;
  40.         }
  41.  
  42.     </style>
  43.     <script type="text/javascript">
  44.         window.onload = function () {
  45.  
  46.             // 获取元素
  47.             var lis = document.getElementById('list').getElementsByTagName('li');
  48.             var text = document.getElementById('text');
  49.             var ok = document.getElementById('ok');
  50.             var edit = document.getElementById('edit');
  51.  
  52.             // 当前编辑的节点
  53.             var cur;
  54.  
  55.             // 遍历编辑按钮，添加点击事件，把当前父节点存入变量cur, 并显示输入框
  56.  
  57.  
  58.  
  59.             // 输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点
  60.  
  61.         }
  62.     </script>
  63. </head>
  64. <body>
  65. <ul id="list">
  66.     <li><span>评论1</span><button>编辑</button></li>
  67.     <li><span>评论2</span><button>编辑</button></li>
  68.     <li><span>评论3</span><button>编辑</button></li>
  69.     <li><span>评论4</span><button>编辑</button></li>
  70. </ul>
  71. <div id="edit" style="display: none">
  72.     <textarea id="text"></textarea>
  73.     <button id="ok">确定</button>
  74. </div>
  75.  
  76. </body>
  77. </html>
下一节