04: 层级评论
Posted 不做大哥好多年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了04: 层级评论相关的知识，希望对你有一定的参考价值。
目录：抽屉项目之js最佳实践
目录：
1.1 层级评论效果图 返回顶部
功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
功能2：当鼠标滑过评论时会显示"回复"，点击进行回复
功能3：提交评论内容
1.2 各功能点code 返回顶部
1、功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
<div class="post_container clearfix" post_id="18"> <div class="row_container clearfix"> <div class="left_container fl"> <div class="post_content">文能一剪梅，武能嘿嘿嘿</div> <div class="post_bar"> <a href="javascript:void(0);" class="like_btn" onclick="like(this,18)" like_count="1">已赞(1)</a> <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,18)">评(0)</a> <span>tom</span> <i>在 2018-01-07 09:51:29 发布</i> </div> </div> <div class="right_container fl"> <img src=""> </div> </div> <div class="comment_container"> <div class="comment_text_container"> <textarea class="comment_text"> </textarea> <a class="send_btn" href="javascript:void(0)" onclick="post_comment(this,18)">发送</a> </div> <div class="comment_content_container"> <ul> <li comment_id="25" display_name="tom" user_id="9"> <div class="comment_row"> <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)"> 我: 评论01 2018-01-07 10:48:31 <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(25,this)">回复</a> </div> <div> </div> </div> <ul> <li comment_id="26" display_name="tom" user_id="9"> <div class="comment_row"> <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)"> 我: 回复品论01 2018-01-07 10:49:02 <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(26,this)">回复</a> </div> <div> </div> </div> <ul> </ul> </li> </ul> </li> <li comment_id="27" display_name="tom" user_id="9"> <div class="comment_row"> <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)"> 我: 评论02 2018-01-07 10:49:14 <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(27,this)">回复</a> </div> <div> </div> </div> <ul> <li comment_id="28" display_name="tom" user_id="9"> <div class="comment_row"> <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)"> 我: 回复品论02 2018-01-07 10:49:27 <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(28,this)">回复</a> </div> <div> </div> </div> <ul> </ul> </li> </ul> </li> </ul> </div> </div> </div>
<div class="post_bar"> <a href="javascript:void(0);" class="like_btn" onclick="like(this,17)" like_count="1">已赞(1)</a> <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,17)">评(0)</a> </div>
/* 展示该帖子的所有评论 */ function show_comments(ele, post_id) { // 先隐藏所有帖子的评论div，然后展示用户点击的帖子的评论div $("div.comment_container").addClass("hide"); var current_comment_container = $(ele).parent().parent().parent().siblings(".comment_container").removeClass("hide"); // 插入一个textarea var comment_text_container = current_comment_container.children(".comment_text_container"); //console.log(comment_text_container); comment_text_container.children().remove(); var comment_text = document.createElement(\'textarea\'); comment_text.className = "comment_text"; comment_text_container.append(comment_text); var send_btn = document.createElement(\'a\'); send_btn.className="send_btn"; send_btn.innerText = "发送"; send_btn.href = "javascript:void(0)"; send_btn.setAttribute("onclick", "post_comment(this,"+post_id+")"); comment_text_container.append(send_btn); // 获取这个帖子的所有评论 var posts = get_comments(post_id); var comment_content_container = current_comment_container.find(".comment_content_container")[0]; build_comment_tree(posts,comment_content_container); }
/* 获取指定帖子的评论 */ function get_comments(post_id) { var comments; $.get({ url:"/app01/get_comments/", data:{"post": post_id}, dataType: "json", async: false, success:function (response) { if(response.status==\'ok\'){ comments = response[\'data\']; } } }); return comments; }
/* 创建评论的HTML */ function build_comment_tree(posts, comment_content_container) { if(posts.length>0){ // 先进行清理工作 $(comment_content_container).text("").children().remove(); // 添加一个根ul var root_ul = document.createElement(\'ul\'); comment_content_container.appendChild(root_ul); // 循环每个帖子 for(var key in posts){ // 生成一个li节点，带comment_id，该li中也带一个ul用于存放子评论 var li = document.createElement(\'li\'); li.setAttribute("comment_id", posts[key][\'id\']); li.setAttribute("display_name", posts[key][\'user__display_name\']); li.setAttribute("user_id", posts[key][\'user_id\']); // li的内容 var comment_content_div = document.createElement(\'div\'); // 评论的具体内容 comment_content_div.className="comment_content_div"; comment_content_div.setAttribute("onmouseover","show_reply_btn(this,true)"); comment_content_div.setAttribute("onmouseout","show_reply_btn(this,false)"); var display_name = posts[key][\'user__display_name\']==$("div.user_info #display_name").text() ? "我" : posts[key][\'user__display_name\']; comment_content_div.innerText = display_name + ": " + posts[key][\'content\']+ " "+ posts[key][\'create_on\']; var comment_bar = document.createElement(\'div\'); // 针对该评论的工具栏 var reply_a = document.createElement(\'a\'); reply_a.className="reply_btn hide"; reply_a.innerText = "回复"; reply_a.href = "javascript:void(0);"; reply_a.setAttribute("onclick", "reply("+posts[key][\'id\']+",this)"); //comment_bar.appendChild(reply_a); comment_content_div.innerHTML += reply_a.outerHTML; var comment_row = document.createElement(\'div\'); // 一条评论的div，包括了以上两个div comment_row.className="comment_row"; comment_row.appendChild(comment_content_div); comment_row.appendChild(comment_bar); li.appendChild(comment_row); // 将整条评论+工具添加到li中 // 用于存放子评论的ul，下方可以没有任何子评论 var sub_ul = document.createElement(\'ul\'); li.appendChild(sub_ul); if(posts[key][\'reply_to\']){ // 评论有reply_to $(comment_content_container).find("li[comment_id="+posts[key][\'reply_to\']+"]").children("ul").append(li); }else { // 评论没有reply_to，将li加到根部的ul root_ul.appendChild(li); } } }else{ $(comment_content_container).text("暂时还没有评论"); } }
# 获取对应帖子的所有评论 def get_comments(request): ret = {\'status\': \'ok\'} if request.method == \'GET\': post_id = request.GET.get("post") post = get_object_or_404(Post, id=post_id) comments = Comment.objects.filter(post=post).values("id", "user_id", "user__display_name", "create_on", "content", "reply_to").order_by(\'id\') ret[\'data\'] = list(comments) return HttpResponse(json.dumps(ret, cls=DateTimeJSONEncoder))
2、功能2：当鼠标滑过评论时会显示"回复"，点击进行回复
<div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
我: 评论01 2018-01-07 10:48:31
<a class="reply_btn hide" href="javascript:void(0);" onclick="reply(25,this)">回复</a>
</div>
/*显示或隐藏"回复"标签*/ function show_reply_btn(ele,show) { show?$(ele).find(".reply_btn:first").removeClass("hide"):$(ele).find(".reply_btn:first").addClass("hide") }
//点击某个评论的回复按钮后，修改textarea的comment_id属性并让其得到焦点 function reply(comment_id, ele) { if(!is_login()){ show_login_reg_frm(); return false; } var reply_to_user = $(ele).parent().parent().parent().attr("display_name"); $("textarea.comment_text").val("").attr("reply_to",comment_id).attr("placeholder","回复 "+reply_to_user).focus(); }
3、功能3：提交评论内容
<div class="comment_text_container">
<textarea class="comment_text">
</textarea>
<a class="send_btn" href="javascript:void(0)" onclick="post_comment(this,18)">发送</a>
</div>
/* 提交评论的内容 */ function post_comment(ele, post_id) { var comment_obj = {}; comment_obj[\'post\']=post_id; var ta = $(ele).siblings(\'textarea\'); comment_obj[\'comment_text\'] = $.trim(ta.val()); if(comment_obj[\'comment_text\'].length==0){ alert("请输入评论内容再提交"); return false; } var reply_to = $(ele).siblings(\'textarea\').attr("reply_to"); if(reply_to){ comment_obj[\'reply_to\'] = reply_to } // ajax上传评论 $.post({ url:"/app01/post_comment/", data:comment_obj, dataType:"json", success:function (response) { if(response.status==\'ok\'){ // 评论成功 alert("评论成功"); var show_comments_btn = $(ele).parent().parent().parent().find(\'.show_comments_btn\')[0]; show_comments(show_comments_btn, post_id) } } }); }
def post_comment(request): ret = {\'status\': \'ok\'} if request.method == \'POST\': user_id = request.session.get("current_user")[\'id\'] post_id = request.POST.get("post") post = get_object_or_404(Post, id=post_id) comment_text = request.POST.get("comment_text") reply_to = request.POST.get("reply_to") Comment.objects.create(user_id=user_id, post=post, content=comment_text, reply_to=reply_to) post.comment_count += 1 post.save() return HttpResponse(json.dumps(ret))
以上是关于04: 层级评论的主要内容，如果未能解决你的问题，请参考以下文章