自己写的一种仿qq留言，评论的简单实现方式。请多指教

最新推荐文章于 2021-09-06 18:22:50 发布

qinghechaoge

最新推荐文章于 2021-09-06 18:22:50 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qinghechaoge/article/details/8302847

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
    <title>仿qq评论</title>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        var re =[];//数据格式
        var curlevel = -1; //当前层级
        //格式为 1自己的id 2.父id 3.层级 4.内容
        var one = [0,0,0,'问题'];
        var one2 = [1,0,1,'答案1'];
        var one3 = [2,0,1,'答案2'];
        var one4 = [3,1,2,'对1的回复1'];
        var one5 = [4,1,2,'对1的回复2'];
        var one6 = [5,2,2,'对2的回复1'];
        var one7 = [6,1,2,'对1的回复3'];
        var one8 = [7,4,3,'对1的回复2的回复1'];
        var one9 = [8,5,3,'对2的回复1的回复1'];
        var one10 = [9,7,4,'对1的回复2的回复1的回复1'];
        re.push(one);re.push(one2);re.push(one3);re.push(one4);re.push(one5);re.push(one6);
        re.push(one7);re.push(one8);re.push(one9);re.push(one10);
        var html='#0_0#';
        repalcehtml();
        /**
        执行替换
        */
        function repalcehtml(){
            curlevel+=1;
            if(curlevel>5)return;
            var level = curlevel;
            var myhtml = [];
            var pid = 0;
            var obj={};
            for(var r in re){
                if(re[r][2]==level){
                    pid = re[r][1];
                    obj[pid+"_"+level]=obj[pid+"_"+level]||[];
                    var me = re[r][0],con = re[r][3];
                    var newhtml ='';
                    if(level>=4){
                        var bb = '';
                        for(var t=0;t<level;t++){
                            bb+='   ';
                        }
                        newhtml = '<div>'+bb+con+'</div>';
                    }else{
                        var bb = '';
                        for(var t=0;t<level;t++){
                            bb+='   ';
                        }
                        newhtml ='<div>'+bb+con+'#'+me+'_'+(level+1)+'#</div>';
                    }
                    obj[pid+"_"+level].push(newhtml);
                }
            }
            for(var o in obj){
                var ttt = '';
                if(obj[o]){
                    ttt = obj[o].join('');
                }
                html = html.replace('#'+o+'#',ttt);
            }
            repalcehtml();
        }
        document.getElementById("main").innerHTML = html;
    </script>
</body>
</html>
执行结果：

问题

答案1

对1的回复1

对1的回复2

对1的回复2的回复1

对1的回复2的回复1的回复1

对1的回复3

答案2

对2的回复1

对2的回复1的回复1

qinghechaoge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的一种仿qq留言，评论的简单实现方式。请多指教

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > 仿qq评论 var re =[];//数据格式 var curlevel = -1; //当前层级 //格式为 1自己
复制链接

扫一扫