js模拟回帖/微博评论功能案例

作者: 冒险小A | 来源:发表于2018-07-11 19:06 被阅读0次

js模拟回帖/微博评论功能案例
[开源APP推荐] iWeibo – 微博软件
js案例：倒计时，仿微博评论
js day19
纯银简书文章整理
电视微博从零到一
使用node搭建自动发图文微博机器人
简单的回帖评论设计
说说此空间创建的用意
需求

学习目的:实现在dom上的增删操作;
案例:模拟回帖/微博评论功能案例;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论回复</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 800px;
            border: 1px solid #cccccc;
            margin: 100px auto;
            padding: 30px;
        }

        #my_textarea {
            width: 80%;
            height: 150px;
        }

        .box-top {
            margin-bottom: 30px;
        }

        #reply {
            margin: 0 80px;
        }

        #reply li {
            border-bottom: 1px dashed #cccccc;
            color: red;
            line-height: 44px;
        }

        #reply li a {
            float: right;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="box-top">
        <label>发表评论:</label>
        <textarea id="my_textarea"></textarea>
        <button id="comment">发表</button>
    </div>
    <ul id="reply">
    </ul>
</div>
<script>
    window.onload = function () {
        //封装id获取操作
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

        //发表按钮点击
        $("comment").onclick = function () {
            //获取输入的内容
            var content = $("my_textarea").value;
            //判断为空
            if (content.length === 0) {
                alert("请输入评论的内容!");
                return;
            } else {
                var li = document.createElement("li");
                li.innerHTML = content + '<a href = "Javascript:;">删除</a>';//动态处理a标签
                $("reply").appendChild(li);//在ul中添加li
                //清除输入框
                $("my_textarea").value = "";
            }

            //删除操作
            //获取li中所有链接a元素
            var liList = $("reply").getElementsByTagName("a");
            //遍历拿到每个"删除"标签
            for (var i = 0; i < liList.length; i++) {
                var a = liList[i];
                a.onclick = function () {
                    //删除父元素li
                    this.parentNode.remove();
                }
            }
        }
    }
</script>
</body>
</html>

可以注意到此时删除操作是在发表操作的区域块中的

在案例过程中,我一开始把删除评论操作和发表评论操作并列的放在一起,因为我觉得这是两个独立的地位相等的操作.
但是执行起来,删除操作并没有效果,原因是在发表操作区域中添加的li元素在删除区域中获取不到,评论的次数决定了删除的个数,决定了遍历数组的长度,如果在删除操作之前就结束了代码块,作用域是传不到删除操作代码块中的.