jQuery带评论的回复显示

来源：互联网 2023-03-16 23:54:59 版权归原作者所有，如有侵权，请联系我们

jQuery带评论的回复显示

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery带评论的回复显示

准备好需要用到的图片。

jQuery带评论的回复显示

新建html文档。

div class="container">

div class="commentbox">

textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content">/textarea>

div class="btn btn-info pull-right" id="comment">评论/div>

/div>

jQuery带评论的回复显示

书写css代码。

style>

.container { width: 1000px; }

.commentbox { width: 900px; margin: 20px auto; }

.mytextarea { width: 100%; overflow: auto; word-break: break-all; height: 100px; color: #000; font-size: 1em; resize: none; }

.comment-list { width: 900px; margin: 20px auto; clear: both; padding-top: 20px; }

.comment-list .comment-info { position: relative; margin-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; }

.comment-list .comment-info header { width: 10%; position: absolute; }

.comment-list .comment-info header img { width: 100%; border-radius: 50%; padding: 5px; }

.comment-list .comment-info .comment-right { padding: 5px 0px 5px 11%; }

.comment-list .comment-info .comment-right h3 { margin: 5px 0px; }

.comment-list .comment-info .comment-right .comment-content-header { height: 25px; }

.comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span { padding-right: 2em; color: #aaa; }

.comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn, .send, .reply-list-btn { cursor: pointer; }

.comment-list .comment-info .comment-right .reply-list { border-left: 3px solid #ccc; padding-left: 7px; }

.comment-list .comment-info .comment-right .reply-list .reply { border-bottom: 1px dashed #ccc; }

.comment-list .comment-info .comment-right .reply-list .reply div span { padding-left: 10px; }

.comment-list .comment-info .comment-right .reply-list .reply p span { padding-right: 2em; color: #aaa; }

/style>

jQuery带评论的回复显示

书写并添加js代码。

script>

//初始化数据

var arr = [

{id:1,img:"./images/img.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[]},

{id:2,img:"./images/img.jpg",replyName:"匿名",beReplyName:"",content:"到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[{id:3,img:"",replyName:"帅大叔",beReplyName:"匿名",content:"来啊，我们一起吃鸡",time:"2017-10-17 11:42:53",address:"",osname:"",browse:"谷歌"}]},

{id:3,img:"./images/img.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"win10",browse:"谷歌",replyBody:[]}

];

$(function(){

$(".comment-list").addCommentList({data:arr,add:""});

$("#comment").click(function(){

var obj = new Object();

obj.img="./images/img.jpg";

obj.replyName="懒人";

obj.content=$("#content").val();

obj.browse="深圳";

obj.osname="win10";

obj.replyBody="";

$(".comment-list").addCommentList({data:[],add:obj});