多级评论回复功能（纯前端，未连数据库）
2024-05-11 01:02:14
效果图：
html结构（css我就不放了）：
<div><!--我的评论--><div class="my-comment"><textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="快来说点什么吧~"></textarea><div class="self-info"><div class="username"><div class="mytx-box"><img class="mytx" src="img/03.jpg" alt=""></div><span class="myname">啦啦啦</span></div><div class="comment-btn">发表评论</div></div></div><!--总评论展示区--><div class="show-comments-area"><ul id="commentsList" class="comment-lists"><!--li--><li class="comment-list-item"><div class="user-tx"><img class="mytx" src="img/00.jpg" alt=""></div><div class="comment-content"><div class="user-name">升职加薪</div><div class="user-comment">哈哈哈哈</div><div class="thumbs-up"><img src="img/赞(2).png" alt=""><img class="none" src="img/赞(3).png" alt=""></div><div class="replay"><img src="img/回复.png" alt=""></div><div class="replay-area none"><textarea class="replay-textarea" placeholder="快来说点什么吧~"></textarea><input class="replay-btn" value="回复" type="button"></div><!--显示我的回复--><div class="show-my-replay"><div><div class="user-tx replay-tx"><img class="mytx" src="img/00.jpg" alt=""></div><div class="comment-content my-replay-content"><div class="user-name my-replay-name">升职加薪</div><div class="user-comment my-replay-comment">哈哈哈哈</div><div class="thumbs-up"><img src="img/赞(2).png" alt=""><img class="none" src="img/赞(3).png" alt=""></div><div class="replay replay-1"><img src="img/回复.png" alt=""></div></div></div></div></div></li></ul></div></div>
JS：
/******** 评论区 *********/
//点击二级回复的图标
function clickReplayIcon(e) {if ($('.replay-area').is(':visible')) {$('.replay-area').remove();//动态创建回复框+按钮===replay-area$(e).parent().append(' <div class="replay-area">\n' +' <textarea class="replay-textarea" placeholder="快来说点什么吧~"></textarea>\n' +' <input class="replay-btn" value="回复" type="button">\n' +' </div>');} else {//动态创建回复框+按钮===replay-area$(e).parent().append(' <div class="replay-area">\n' +' <textarea class="replay-textarea" placeholder="快来说点什么吧~"></textarea>\n' +' <input class="replay-btn" value="回复" type="button">\n' +' </div>');}//点击回复按钮$(".replay-area").on('click', '.replay-btn', function () {$(e).parents('.comment-list-item').find('.show-my-replay').first().append('<div>\n' +' <div class="user-tx replay-tx">\n' +' <img class="mytx" src="img/00.jpg" alt="">\n' +' </div>\n' +' <div class="comment-content my-replay-content">\n' +' <div class="user-name my-replay-name"></div>\n' +' <div class="user-comment my-replay-comment"></div>\n' +' <div class="thumbs-up">\n' +' <img src="img/赞(2).png" alt="">\n' +' <img class="none" src="img/赞(3).png" alt="">\n' +' </div>\n' +' <div class="replay">\n' +' <img src="img/回复.png" alt="">\n' +' </div>\n' +' <div class="show-my-replay">\n' +' </div>\n' +' </div>');var newComment = $(".replay-textarea").val().trim();var newName = $(".myname").text().trim();//获取到的是img标签元素var newTx = $(".mytx-box").html();/** $(this).parents('.comment-list-item')与$('.show-my-replay')的区别：* 前者能对应到相应的li 的评论去中，后者会找到所有的$('.show-my-replay')，并把新获取的内容赋给最后一个$('.show-my-replay')上，，及位置不对应* */$(e).parents('.comment-list-item').find(".replay-tx").last().html(newTx);$(e).parents('.comment-list-item').find(".my-replay-name").last().html(newName);$(e).parents('.comment-list-item').find(".my-replay-comment").last().html(newComment);$(".replay-textarea").val("");//点赞图标$(".thumbs-up").on('click', 'img', function () {$(e).hide().siblings().show();});//发送完后 让回复的div消失$('.replay-area').remove();/*更新总评论数*/total_comments_num = $(".comment-content").length;$(".total-comments-number").text(total_comments_num);});
}$(function () {//点赞图标$(".thumbs-up").on('click', 'img', function () {$(this).hide().siblings().show();});$(".replay").click(function () {clickReplayIcon(this);});//点击 发表评论$(".comment-btn").click(function () {$(".textarea").animate({height: "65px"}, 400);var newComment = $(".textarea").val().trim();var newName = $(".myname").text().trim();//获取到的是img标签元素var newTx = $(".mytx-box").html();if (newComment.length == 0) {alert("您还没说什么呢~");} else {//动态创建 li$('<li class="comment-list-item">\n' +' <div class="user-tx">\n' +' </div>\n' +' <div class="comment-content">\n' +' <div class="user-name"></div>\n' +' <div class="user-comment"></div>\n' +' <div class="thumbs-up">\n' +' <img src="img/赞(2).png" alt="">\n' +' <img class="none" src="img/赞(3).png" alt="">\n' +' </div>\n' +' <div class="replay">\n' +' <img src="img/回复.png" alt="">\n' +' </div>\n' +' <div class="show-my-replay">\n' +' </div>\n' +' </div>\n' +' </li>').prependTo("#commentsList");$(".user-tx").first().html(newTx);$(".user-name").first().html(newName);$(".user-comment").first().html(newComment);$(".textarea").val("");}//点击 回复图标$(".comment-list-item ").on("click", '.replay', function () {clickReplayIcon(this);});});});多级评论回复功能（纯前端，未连数据库）相关推荐
- java评论回复功能例子_Java实现评论回复功能的完整步骤
前言 使用递归循环开发评论回复功能,适用于大部分的简单单体应用 评论功能或许是大多数的单体应用之中会用到的功能,我们会在自己所开发的项目之中进行集成该功能 大多数时候我们会将评论功能划分成以下几种: ...
- Java单表实现评论回复功能
Java单表实现评论回复功能 1.简介 2.功能实现图 3.数据库设计 4.实体类 5.实现思路 6.功能实现 6.1 Sql入手 6.2 业务实现 7.前端实现 8.最终成果 1.简介 最近在写毕业 ...
- 评论回复功能的设计与实现
评论回复功能的数据库设计可以分开设计成两张表,评论表和回复表,也可以将其设计为一张表,我采用的是一张表 评论回复表的相关字段(我做的是商品goods下的评论回复) 字段解释: gc_id:评论回复表i ...
- 实现微信公众号评论回复功能
最近做一个项目,实现类似微信公众号评论回复功能,如图所示: 大概分以下几个组件: 表情包组件: <template><div class="showEmjio" ...
- thinkphp5实现评论回复功能
由于之前写评论回复都是使用第三方插件:畅言 所以也就没什么动手,现在证号在开发一个小的项目,所以就自己动手写评论回复,没写过还真不知道评论回复功能听着简单,但仔细研究起来却无法自拔,由于用户量少, ...
- Android开发之评论回复功能
Android开发之评论回复功能 一:效果图 二:具体代码 1.首先是布局文件(activity_main) 2.第二个布局文件(comment_item) 3.第三个布局文件(reply_item) ...
- 评论回复功能 asp.net_微信重大更新！公众号推送时间线打乱+7大新功能上线！怎么玩？...
作者 |韩俊杰来源 |馒头商学院「ID:mantousxy」自从微信年初举办公开课后,每个月都没闲着,各种新功能.小改版层出不穷.就在最近,微信又接连推出几项新功能,动作让人"眼花缭乱&qu ...
- mysql 评论回复表设计_数据库设计——评论回复功能
1.概述 评论功能已经成为APP和网站开发中的必备功能.本文主要介绍评论功能的数据库设计. 评论功能最主要的是发表评论和回复评论(删除功能在后台).评论功能的拓展功能体现有以下几方面: (1)单篇文章 ...
- vue3评论回复功能
运用的是vue3+ts,文本框和小图标使用的是ant-design-vue框架 简单的实现了页面布局,点击回复等小功能(删除数据和回复添加到数组中目前没有写,因为项目要求后面需要对接后端接口,所以就懒 ...
最新文章
- 七年终登Science封面：最强大脑皮层神经网络重建，揭示迄今哺乳动物最大神经线路图...
- VUE iscroll（银联二维码，浩哥页面用过）
- cpuz北桥频率和内存频率_内存频率怎样计算，一分钟教会你
- linux如果一个目录具有执行,Linux操作系统部分复习题答案
- oracle 多个with as
- 有了MDL锁视图，业务死锁从此一目了然
- RxJava 之创建操作符
- jpa级联添加_JPA中的一对多双向关联与级联操作
- asp 后台批量管理程序
- 编译openjdk时cygwin需要下载的内容
- 食品行业仓储条码管理系统解决方案
- linux cat命令追加,linux cat命令
- 得洲奥斯汀研究生计算机专业排名,德克萨斯大学奥斯汀分校有计算机工程专业排名...
- 使用shell脚本写出乘法
- Doctrine浅析
- linux系统修改屏幕分辨率6,Linux系统怎么更改屏幕分辨率
- php语句连接,php – 内连接选择语句
- 【POI2013】bzoj3426 Tower Defence Game
- YTU 2798: 复仇者联盟之数组成绩统计
- Java学习笔记 - Chapter 1