比较简陋的评论回复功能，但我目前也只能做成这样了（哭泣）
关键代码如下：
html代码（参照了csdn的前端）：
<div class="comment_box">
<div class="comment_edit_box">
<div class="userimg">
<a href="#"><img class="tx" width="20px" height="20px" src="{{usertx}}" alt="头像" /></a>
</div>
<div class="form">
<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="评论……" maxlength="1000"></textarea>
<div class="liuyan_btn_box"><input type="submit" class="btn" id="fabiaopinglun" value="发表评论"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="comment-list-container" style="display: block;">
<a id="comments"></a>
<div class="comment-list-box" id="comment-list-box">
<ul class="comment-list">
{% if comments %} {% for comment in comments %}
<li class="comment-line-box d-flex" data-commentid="{{comment.commentid}}" data-replyname="{{comment.username}}">
<div style="display: flex;width: 100%;">
<a target="_blank" href="#"><img src="{{comment.usertx}}" username="{{comment.username}}" alt="" class="avatar1"></a>
<div class="right-box">
<div class="new-info-box clearfix">
<a target="_blank" href="#">
<span class="name ">{{comment.username}}</span>
</a>
<span class="colon">:</span>
<span class="floor-num"></span>
<span class="new-comment">{{comment.content}}</span>
<span class="date" title="{{comment.commentdate}}">{{comment.commentdate}}</span>
<span class="new-opt-floating">
<a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>
</span>
</div>
</div>
</div>
</li>
<li class="replay-box" id="huifulist" style="display:block">
<ul class="reply-comment-list">
{% if dic[comment.commentid] %} {% for reply in dic[comment.commentid] %}
<li class="comment-line-box d-flex" data-commentid="{{reply.commentid}}" data-replyname="{{reply.username}}">
<div style="display: flex;width: 100%;">
<a target="_blank" href="#">
<img src="{{reply.usertx}}" username="{{reply.username}}" alt="" class="avatar1">
</a>
<div class="right-box ">
<div class="new-info-box clearfix">
<a target="_blank" href="#">
<span class="name mr-8">{{reply.username}}</span>
</a>
<span class="text">回复</span><span class="nick-name">{{reply.isreplyname}}</span>
<span class="colon">:</span>
<span class="text"></span>
<span class="new-comment">{{reply.content}}</span>
<span class="date" title="{{reply.replydate}}">{{reply.replydate}}</span>
<span class="new-opt-floating"><a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>
</span>
</div>
</div>
</div>
</li>
{% endfor %}{% endif %}
</ul>
</li>
{% endfor %} {% endif %}
</ul>
</div>
</div>
</div>
css样式
.comment_box {
position: relative;
width: inher;
margin: auto;
}
.comment_edit_box {
position: relative;
margin-top: 2px;
}
.userimg {
float: left;
}
.userimg img {
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: 3px;
}
.comment-content {
width: 80%;
height: 40px;
resize: none;
margin-left: 2px;
font-size: 16px;
font-family: "微软雅黑";
padding: 3px 3px;
outline: none;
border: none;
border-radius: 5px;
background: white;
}
.comment-content:focus {
border-color: #84bffa;
box-shadow: 0 0 10px #84bffa;
background: white;
}
#reply_box {
width: 600px;
/* background: red; */
}
.liuyan_btn_box {
width: 80%;
margin-left: 22px;
}
.btn {
display: block;
float: right;
width: 80px;
height: 25px;
border-radius: 20px;
outline: none;
color: white;
background: #3a6ab5;
border: none;
cursor: pointer;
}
.btn1 {
display: block;
float: right;
width: 80px;
height: 25px;
border-radius: 20px;
outline: none;
color: white;
background: #3a6ab5;
border: none;
cursor: pointer;
margin-right: 20px;
}
.comment-line-box {
position: relative;
margin-top: 3px;
border-bottom: #cecece;
}
.comment-list .comment-line-box {
padding: 3px 0;
border-bottom: solid 1px rgb(226, 226, 226);
}
.replay-box .comment-list .comment-line-box {
border-bottom: none;
}
.comment-line-box a {
position: relative;
width: 20px;
height: 20px;
}
.avatar1 {
width: 20px;
height: 20px;
border-radius: 50%;
}
.new-info-box {
margin-left: 5px;
line-height: 20px;
}
.new-info-box a {
text-decoration: none;
}
.name {
text-decoration: none;
color: rgb(184, 184, 184);
}
.colon {
color: rgb(184, 184, 184);
}
/* .new-comment {
font-size: 13px;
} */
.date {
margin-left: 5px;
font-size: 12px;
color: gainsboro;
}
.btn-reply {
margin-left: 5px;
color: rgb(122, 122, 201);
cursor: pointer;
}
.replay-box {
position: relative;
margin-left: 20px;
padding-left: 3px;
border-left: solid 1px rgb(226, 226, 226);
}
.text {
margin-left: 5px;
margin-right: 5px;
color: rgb(184, 184, 184);
}
.nick-name {
color: rgb(184, 184, 184);
}
script代码（这里用了ajax请求）：
//添加评论
$('#fabiaopinglun').click(function() {
var commentcontent = $('#comment_content').val();
if (commentcontent == "") {
alert("未输入内容");
return ""
}
var articleid = $('#articleid').text().trim();
var userid = $('#userid').text().trim();
$.ajax({
url: '/addcomment',
type: 'POST',
data: JSON.stringify({
'articleid': articleid,
'userid': userid,
'content': commentcontent
}),
success: function(data) {
// alert(data)
// alert(data['content'])
var str = '<ul class="comment-list">' +
'<li class="comment-line-box d-flex" data-commentid="' + data['commentid'] + '" data-replyname="回复名称">' +
'<div style="display: flex;width: 100%;">' +
'<a target="_blank" href="#">' +
'<img src="' + data['tx'] + '" username="' + data['username'] + '" alt="" class="avatar1">' +
'</a>' +
'<div class="right-box ">' +
'<div class="new-info-box clearfix">' +
'<a target="_blank" href="#">' +
'<span class="name ">' + data['username'] + '</span>' +
'</a>' +
'<span class="colon">:</span>' +
'<span class="new-comment">' + data['content'] + '</span>' +
'<span class="date" title="' + data['time'] + '">' + data['time'] + '</span>' +
'<span class="new-opt-floating">' +
'<a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</li>' +
'</ul>'
$('#comment-list-box').prepend(str);
$('#comment_content').val("");
}
})
})
$('.btn-bt').click(function() {
// var articleid = $('#articleid').text().trim();
// alert("点击了回复")
var isreply = $('#isreply').val();
if (isreply == "1") {
$('#reply_box').remove();
$('#isreply').val("0");
}
//添加输入框
var div = $(this).parents(".right-box");
var edit = '<div class="comment_edit_box" id="reply_box">' +
'<div class="userimg">' +
'<a href="#"><img class="tx" width="20px" height="20px" src="../../static/student/tx/default_touxiang.png" alt="头像" /></a>' +
'</div>' +
'<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="评论……" maxlength="1000" ></textarea>' +
'<div class="liuyan_btn_box">' +
'<input type="submit" class="btn" id="fabiaopinglun" value="回复评论">' +
'</div>' +
'<div class="quxiao_box">' +
'<input type="submit" class="btn1" id="quxiao" value="取消回复">' +
'</div>' +
'<div style="clear: both;"></div>' +
'</div>';
var row = $(edit);
div.append(row);
$('#isreply').val("1");
$(row).find('#comment_content').focus(); //自动聚焦
$(row).find('#fabiaopinglun').click(function() {
// alert("回复的确定按钮")
var ul = $(this).parents(".reply-comment-list");
if (ul.length === 0) {
var ali = $(this).parents('.comment-line-box');
var replyli = $(ali).next();
ul = $(replyli).find('.reply-comment-list');
}
var li = $(this).parents(".comment-line-box");
var commentid = $(li).attr('data-commentid');
var isreplyname = $(li).attr('data-replyname');
var content = $(li).find('#comment_content').val();
var userid = $('#userid').text().trim();
$.ajax({
url: '/addreply',
type: 'POST',
data: JSON.stringify({
'commentid': commentid,
'isreplyname': isreplyname,
'userid': userid,
'content': content
}),
success: function(data) {
var str = '<li class="comment-line-box d-flex" data-commentid="' + data["commentid"] + '" data-replyname="' + data["replyname"] + '">' +
'<div style="display: flex;width: 100%;">' +
'<a target="_blank" href="#">' +
'<img src="' + data["tx"] + '" username="' + data["replyname"] + '" alt="" class="avatar1">' +
'</a>' +
'<div class="right-box ">' +
'<div class="new-info-box clearfix">' +
'<a target="_blank" href="#">' +
'<span class="name mr-8">' + data["replyname"] + '</span>' +
'</a>' +
'<span class="text">回复</span><span class="nick-name">' + data["nickname"] + '</span>' +
'<span class="colon">:</span>' +
'<span class="text"></span>' +
'<span class="new-comment">' + data["content"] + '</span>' +
'<span class="date" title="' + data["time"] + '">' + data["time"] + '</span>' +
'<span class="new-opt-floating"><a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'</li>';
$(ul).prepend(str);
$(li).find('#reply_box').remove();
},
error: function(data) {
alert("错误" + data);
}
})
})
$(row).find('#quxiao').click(function() {
// alert("点击了取消");
$(this).parents("#reply_box").remove();
});
$(row).find('#reply_box').blur(function() {
$(this).parents("#reply_box").remove();
})
})
两个单纯得结合一下：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
.comment_box {
position: relative;
width: inher;
margin: auto;
}
.comment_edit_box {
position: relative;
margin-top: 2px;
}
.userimg {
float: left;
}
.userimg img {
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: 3px;
}
.comment-content {
width: 80%;
height: 40px;
resize: none;
margin-left: 2px;
font-size: 16px;
font-family: "微软雅黑";
padding: 3px 3px;
outline: none;
border: none;
border-radius: 5px;
background: white;
}
.comment-content:focus {
border-color: #84bffa;
box-shadow: 0 0 10px #84bffa;
background: white;
}
#reply_box {
width: 600px;
/* background: red; */
}
.liuyan_btn_box {
width: 80%;
margin-left: 22px;
}
.btn {
display: block;
float: right;
width: 80px;
height: 25px;
border-radius: 20px;
outline: none;
color: white;
background: #3a6ab5;
border: none;
cursor: pointer;
}
.btn1 {
display: block;
float: right;
width: 80px;
height: 25px;
border-radius: 20px;
outline: none;
color: white;
background: #3a6ab5;
border: none;
cursor: pointer;
margin-right: 20px;
}
.comment-line-box {
position: relative;
margin-top: 3px;
border-bottom: #cecece;
}
.comment-list .comment-line-box {
padding: 3px 0;
border-bottom: solid 1px rgb(226, 226, 226);
}
.replay-box .comment-list .comment-line-box {
border-bottom: none;
}
.comment-line-box a {
position: relative;
width: 20px;
height: 20px;
}
.avatar1 {
width: 20px;
height: 20px;
border-radius: 50%;
}
.new-info-box {
margin-left: 5px;
line-height: 20px;
}
.new-info-box a {
text-decoration: none;
}
.name {
text-decoration: none;
color: rgb(184, 184, 184);
}
.colon {
color: rgb(184, 184, 184);
}
/* .new-comment {
font-size: 13px;
} */
.date {
margin-left: 5px;
font-size: 12px;
color: gainsboro;
}
.btn-reply {
margin-left: 5px;
color: rgb(122, 122, 201);
cursor: pointer;
}
.replay-box {
position: relative;
margin-left: 20px;
padding-left: 3px;
border-left: solid 1px rgb(226, 226, 226);
}
.text {
margin-left: 5px;
margin-right: 5px;
color: rgb(184, 184, 184);
}
.nick-name {
color: rgb(184, 184, 184);
}
</style>
</head>
<body>
<div class="comment_box">
<div class="comment_edit_box">
<div class="userimg">
<a href="#"><img class="tx" width="20px" height="20px" src="{{usertx}}" alt="头像" /></a>
</div>
<div class="form">
<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="评论……" maxlength="1000"></textarea>
<div class="liuyan_btn_box"><input type="submit" class="btn" id="fabiaopinglun" value="发表评论"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="comment-list-container" style="display: block;">
<a id="comments"></a>
<div class="comment-list-box" id="comment-list-box">
<ul class="comment-list">
{% if comments %} {% for comment in comments %}
<li class="comment-line-box d-flex" data-commentid="{{comment.commentid}}" data-replyname="{{comment.username}}">
<div style="display: flex;width: 100%;">
<a target="_blank" href="#"><img src="{{comment.usertx}}" username="{{comment.username}}" alt="" class="avatar1"></a>
<div class="right-box">
<div class="new-info-box clearfix">
<a target="_blank" href="#">
<span class="name ">{{comment.username}}</span>
</a>
<span class="colon">:</span>
<span class="floor-num"></span>
<span class="new-comment">{{comment.content}}</span>
<span class="date" title="{{comment.commentdate}}">{{comment.commentdate}}</span>
<span class="new-opt-floating">
<a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>
</span>
</div>
</div>
</div>
</li>
<li class="replay-box" id="huifulist" style="display:block">
<ul class="reply-comment-list">
{% if dic[comment.commentid] %} {% for reply in dic[comment.commentid] %}
<li class="comment-line-box d-flex" data-commentid="{{reply.commentid}}" data-replyname="{{reply.username}}">
<div style="display: flex;width: 100%;">
<a target="_blank" href="#">
<img src="{{reply.usertx}}" username="{{reply.username}}" alt="" class="avatar1">
</a>
<div class="right-box ">
<div class="new-info-box clearfix">
<a target="_blank" href="#">
<span class="name mr-8">{{reply.username}}</span>
</a>
<span class="text">回复</span><span class="nick-name">{{reply.isreplyname}}</span>
<span class="colon">:</span>
<span class="text"></span>
<span class="new-comment">{{reply.content}}</span>
<span class="date" title="{{reply.replydate}}">{{reply.replydate}}</span>
<span class="new-opt-floating"><a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a>
</span>
</div>
</div>
</div>
</li>
{% endfor %}{% endif %}
</ul>
</li>
{% endfor %} {% endif %}
</ul>
</div>
</div>
</div>
</body>
</html>
2427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
