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

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

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

编程练习

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

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

任务

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

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

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

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

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
资料下载
代码

全部精华我要发布

为什么用text.value而不是text.innerhtml或者text.innertext

最新回答 / 玖戣

刚刚测试了一下，感觉不太对，于是上csdn找到了答案: innerText是id为object的闭合标签内的文本,输入输出的是转义文本(字符串); (label控件用innerText有效)innerHtml是<标签>这里</标签>的文本,输入输出到该DOM内部纯HTML代码流; (获得td、div等html元素时候,它们是没有value或是text属性,只能用innerHtml)value是表单元素特有的属性,输入输出的是转义文本(字符串); (Button、CheckBo...

2 回答 1482 浏览

2018-05-28

mark

最新回答 / 野生前端菜鸟

一般不用for in 来遍历length ,它有bug,会遍历到原型链上继承的属性，一般for in 用来遍历对象的属性，如 for key in obj,具体的话你看看 mdn 的 for in 网址链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in怎么查看代码？我点击看不了

2 回答 1007 浏览

2017-01-20

<!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, 并显示输入框
        for (var i = 0; i < lis.length; i++)
        {
            for (var j = 0; j< 10; j++)
            {
                if (lis[i].childNodes[j].innerHTML == "编辑")
                {
                    lis[i].childNodes[j].onclick = function ()
                    {
                        edit.style.display = 'block';
                        cur = this.parentNode;
                        text.focus();
                    }
                    break;
                }
            }
        }

        // 输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点
        ok.onclick = function ()
        {
            cur.innerHTML = '<span>'+ text.value +'</span> <button>编辑</button>';
            text.value = '';
            edit.style.display = 'none';
        }

    }
    </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>

+ 我来回答回答最高可+2积分

0 回答 1078 浏览

2014-09-11