原生js实现回复评论功能
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
实现原理
功能1.删除状态
用removeChild()方法即可
功能2.最上面的点赞
判断文字的内容是否为赞，做相应操作改变存放赞数量的容器文本内容
功能3.回复评论
创建一个新的评论添加到评论列表里
功能4.回复里的点赞
判断我是否点了赞，做相应操作
功能5.回复或者删除
判断字符串回复还是删除，做相应操作
代码用了事件代理，还有三元运算判断，减少代码量
每行代码都有详细的注释
一眼看到那么多的代码不要烦躁
其实你要把每个功能单独去看都是很简单的dom操作
一点点消化，读懂每一行代码
完整代码
注：代码复制到本地后替换下图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;border:none; outline: none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover, a:visited, a:link, a:active{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';}
#pn{width: 550px; height: auto; background: #fff; margin: 0 auto; padding: 20px;}
.list0{padding: 20px 0; position: relative; border-top: 1px solid #eee;}
.head{width: 60px; float: left;}
.head img{width: 60px; height: 60px; }
.close{width: 20px; height: 20px; position: absolute; top: 0; right: 0; color: #696e78; font-size: 14px; text-align: center; line-height: 20px;}
.close:hover{color: #eb7350;}
.content{width: 450px; line-height: 20px; font-size: 14px; margin-left: 70px; }
.name{color: #eb7350; }
.pic{margin: 5px 0;}
.good:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.good{*zoom:1;}
.date{float:left; color: #808080;}
.good a{float: right; color: #808080;}
.people{background: #F7F7F7; height: 28px; line-height: 28px; padding-left: 10px; margin: 5px 0;}
.comment:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.comment{*zoom:1; padding: 10px 0; border-top: 1px solid #eee;}
.comment-left{width: 30px; float: left; display: inline; margin-right: 10px;}
.comment-left img{width: 30px; height: 30px;}
.comment-right{float: left; width: 410px;}
.comment-text{line-height: 18px;}
.comment-text span{color:#eb7350;}
.comment-date{font-size: 12px; line-height: 14px; color: #ccc; position: relative;}
.comment-zan{position: absolute; right: 40px; bottom: 0; color: #808080;}
.comment-dele{position: absolute; right: 0; bottom: 0; color: #808080;}
.hf:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.hf{*zoom:1;}
.hf-text{ border: 1px solid #eee; display: block; height: 15px; width: 438px; padding: 5px; resize: none; color: #ccc; font-size:12px;}
.hf-on .hf-text{height: 60px; color: #333; border:1px solid #ff8140;}
.hf-btn{float: right; width: 65px; height: 26px; background: #f7f7f7; color: #ccc; font-size: 12px; display: none;}
.hf-btn-on{background: #ff8140; color: #fff; }
.hf-nub{float: right; padding: 3px 5px; color: #666; display: none;}
.hf-on .hf-btn{display: inline;}
.hf-on .hf-nub{display: inline;}
</style>
</head>
<body>
<ul id="pn">
<li class="list0">
<a class="close" href="javascript:;">X</a>
<div class="head"><img src="/UploadFiles/2021-04-02/T1.jpg">
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
下一篇：js实现表格筛选功能