目录：抽屉项目之js最佳实践
目录：
1.1 层级评论效果图
功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
功能2：当鼠标滑过评论时会显示"回复"，点击进行回复 功能3：提交评论内容
1.2 各功能点code
1、功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
文能一剪梅，武能嘿嘿嘿![]()
发送
/* 展示该帖子的所有评论 */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：当鼠标滑过评论时会显示"回复"，点击进行回复
我: 评论01 2018-01-07 10:48:31
/*显示或隐藏"回复"标签*/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：提交评论内容
/* 提交评论的内容 */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))