编程练习，人人网评论功能教程-慕课网

第1章效果简介
视频：1-1 效果简介(02:16)

第9章编程挑战
编程：9-1 编程挑战

编程练习

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

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

任务

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

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

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

  提示:
  1. 取得输入框的内容
  2. 如果内容为空，则返回
  3. 把cur的第一个子节点的innerHTML改为输入框内容
  4. 隐藏输入框

?不会了怎么办

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body { padding: 20px; } #list { list-style: none; width: 400px; border: 1px solid #666666; } li { list-style: none; background: #a7cbff; margin: 10px 0; height: 30px; position: relative; } li button { display: none; position: absolute; right: 3px; top: 3px; } li:hover button { display: inline-block; } textarea { display: block; width: 400px; height: 50px; margin: 10px 0; } </style> <script type="text/javascript"> window.onload = function () { // 获取元素 var lis = document.getElementById('list').getElementsByTagName('li'); var text = document.getElementById('text'); var ok = document.getElementById('ok'); var edit = document.getElementById('edit'); // 当前编辑的节点 var cur; // 遍历编辑按钮，添加点击事件，把当前父节点存入变量cur, 并显示输入框 // 输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点 } </script> </head> <body> <ul id="list"> <li><span>评论1</span><button>编辑</button></li> <li><span>评论2</span><button>编辑</button></li> <li><span>评论3</span><button>编辑</button></li> <li><span>评论4</span><button>编辑</button></li> </ul> <div id="edit" style="display: none"> <textarea id="text"></textarea> <button id="ok">确定</button> </div> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

8-2 编程练习

编程练习

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐