本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2020-09-15 | 编程技术 | 3455 次阅读 | 等你评论 | 3 次点赞 | 繁体

看了些评论引用盖楼的网站,觉得网易的效果比较好,简单明了,让人看了就知道是引用评论,迟点准备自己也写个玩玩,应该能从中学到不少东西. 前端部分实现如下:https://www.phpvar.com/archives/1382.html

JS部分实现如下:

<div class="comments">
        <div></div>
        <div class="coms_head">评论列表</div>
        <div class="coms_body" id="commentArea"></div>
</div>
<script>
var data = [
    {id:1,parent_id:0,content:'第一个'},
    {id:2,parent_id:0,content:'第二个'},
    {id:3,parent_id:1,content:'回复 第一个'},
    {id:4,parent_id:1,content:'回复 第一个'},
    {id:5,parent_id:3,content:'回复 回复 第一个'},
    {id:6,parent_id:5,content:'回复 回复 回复 第一个'},
    {id:7,parent_id:1,content:'回复 第一个'},
    {id:8,parent_id:2,content:'回复 第二个'},
];

function commentTree(commentList){
    var comment_str = "<div class='comment' >";
    commentList.forEach(function(row) {
        var temps = "<div class='content'>"+row.content+"</div>";
        comment_str += temps;
        console.log(row.children);
        if (row.children && row.children.length>0){
            comment_str +=commentTree(row.children);
        }
    });
    comment_str += "</div>";
    return comment_str;
}

function toTree(data) {
    data.forEach(function(item) {
        delete item.children;
    });
    var map = {};
    data.forEach(function(item) {
        map[item.id] = item;
    });
    var val = [];
    data.forEach(function(item) {
        var parent = map[item.parent_id];
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            val.push(item);
        }
    });
    return commentTree(val);
}

var comment = toTree(data);
document.getElementById('commentArea').innerHTML=comment;
</script>

标签: javascripthtml前端

猜你喜欢
Typecho纯代码生成sitemap站点地图
想要实现 Typecho 纯代码生成 sitemap 站点地图只需要 2 步就够了。1、在博客主题目录新建 sitemap.php 页面,放入以下代码:<?php /** *HTML版网站...
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
typecho使用文件缓存加快打开速度
typecho 是一个伪静态的博客系统,如果不使用缓存,每次打开页面都会查询数据库,访问人数多了以后服务器压力倍增。但是,typecho 是一个 php 的程序,我们可以利用 php 将实时页面...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
Typecho 评论弹幕插件下载及食用教程
视频弹幕大家已经很熟悉了,他是直接显现在视频上的评论,可以以滚动、停留甚至更多动作特效方式出现在视频上,是观看视频的人发送的简短评论。最近在开发 超赞网站导航,突发奇想能不能给网页也加上弹幕,这...
vim/vi 常用快捷键记录
所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在。 但是目前我们使用比较多的是 vim 编辑器。 vim 具有程序编辑的能力,可以主动的以字体颜色
Python3还有哪些未Get的潜藏技能?
在 Python 3 推出后,人们开始逐步将基于 Python 2 的代码迁移至 Python 3 。但在迁移过程中,很多代码都未能使用到 Python 3 提供的新功能。本文作者介绍了相关功能的介绍
部署 Monit 来监控服务
Monit 是一个轻量的监控工具,大小不到 2M,可运行于 linux 之上。 ![图片alt](https://cdn.wangtwothree.com/imgur/KyUrIC8.png '
MAC系统制作ubuntu启动U盘教程
最近新买了一台便宜的低功耗小主机惠普 T620,CPU 是 AMD 的 GX-415GA,4G 内存,准备给他刷个 ubuntu 系统,用来做简易的 NAS,并且安装 homeassistant 用作
(首次提交评论需审核通过才会显示,请勿重复提交)