thinkphp+jquery实现两级评论回复效果

这个不是无限级评论，只有两层，实现起来比较简单点，所有评论的parent_id都是对应的第一级评论的id，新增评论的时候，就在对应的评论下面追加，并且用prepend()把最新评论放到最前面

 

 

数据库设计（我这里没有真正用到数据库，为了测试，用的都是写死的假数据，所以后台请求的接口只是返回了一个code==200）

 

 

 html代码

　　　　<div style="font-size: 0.28rem; padding: .2rem; ">
            <div class="layui-row" >
                <textarea style=" width: 90%; height: 1rem;resize: none; margin-left: .2rem; padding: 0.1rem" replyid="0">textarea>
            div>
            <div class="layui-row" >
                
                <div class="comment-submit" parent_id="0" style="float: right;background-color:#3385ff;font-size:0.22rem; padding:0.07rem 0.15rem;margin-right: 0.3rem">
                    <a  style="color:#fff;" href="javascript:void(0);" parent_id="0">发表评论a>
                div>
            div>
            <div class="layui-row" style="margin: .2rem; ">
                评论区
            div>
            
            
            <div class="layui-row" style="line-height: 0.6rem; ">
                
                <ul class="comment-ul">
                    <li comment_id='1'>
                        <hr style="margin: .2rem auto;">
                        <div style=" width: 95%;margin: 0 auto">
                            <div  style="margin: .2rem 0; ">
                                <img src="/personal/images/touxiang.jpg" style="width: .6rem; height: .6rem; ">
                                <span style="padding-left: .1rem; font-weight: bold;">下页再停留1span>
                                <span style="float: right; font-size: 0.26rem; color: #949494">2012/02/22span>
                            div>
                            <div style="padding: 0 .2rem 0 .2rem">哪些中草药容易引起肝损伤?div>
                            <div class="comment-reply" comment_id="1"  style="text-align: right; margin-right: .3rem; font-size: 0.26rem">
                                <a  href="javascript:void(0);" style="color: #8590a6">回复a>    
                            div>
                        div>
                        
                        <ul class="children" style="margin-left: .2rem">
                            
                        ul>
                    li>
                ul>
            div>
            
            
        div>

js代码  (接口没有实际作用，为了测试只返回了一个code==200)

$(function(){

    // 点击“回复”按钮显示或隐藏回复输入框
    $("body").delegate(".comment-reply","click",function () {

        if ($(this).next().length > 0) {    //判断回复框div是否存在，存在就去除
            $(this).next().remove();
        }else{    //添加回复idv
            $(".comment-reply").next().remove();    //删除已经存在的所有回复div
            // 添加当前回复div
            var parent_id = $(this).attr("comment_id");        //要回复的评论id
            var divhtml = "";

            divhtml = "
\
                        
\
                            \
                        
\
                        
\
                            回复\
                        
\
                      ";
            $(this).after(divhtml);
        }
    });

    //点击提交评论的内容
    $("body").delegate(".comment-submit","click",function () {
        var content = $.trim($(this).parent().prev().children("textarea").val())    //根据布局结构获取当前评论内容
        $(this).parent().prev().children("textarea").val("");    //获取完内容后清空输入框

        if (content == '') {
            alert("评论内容不能为空!");
            // layer.msg('评论内容不能为空', function(){ });
        }else{

            //创建一个对象，存储获取的数据
            // var cmdata = new Object();
            parent_id = $(this).attr("parent_id")    //上级评论id
            head_pic = '/personal/images/touxiang.jpg'    //获取评论者的头像
            nickname = '测试昵称'    //获取评论者的昵称

            // 如果是一级评论 被回复人为空，如果不是一级评论，添加被回复人昵称
            if (parent_id !== "0") {

                var receive_nickname = $(this).parent().prev().parent().prev().prev().prev().children("span").eq(0).text()    //获取被回复人的昵称
                content = "回复  "+ receive_nickname +"："+content        //拼接二级评论内容 被回复人昵称+内容
            }

            // 提交数据
            $.ajax({
                url:"/home/xszx/addComment",
                type:"POST",
                dataType:"Json",
                data:{content:content, parent_id:parent_id, head_pic:head_pic, nickname:nickname},
                success:function (data) {
                    console.log(data)
                    if (data.code == 200) {

                        $(".comment-reply").next().remove();    //删除已经存在的所有回复框div

                        console.log(parent_id)
                        // 显示新增评论
                        var newli =  "";
                        if (parent_id == "0") {
                            // 一级评论,添加到一级ul列表中
                            newli = "
\
                                        
\
                                        
\
                                            
\
                                                    \
                                                    下页再停留1\
                                                    2012/02/22\
                                            
\
                                            
\
                                                一级评论一级评论一级评论一级评论\
                                            
\
                                            
\
                                                回复    \
                                            
\
                                        
\
                                        
\
                                        
\
                                    ";
                            $(".comment-ul").prepend(newli);

                        }else{
                            //二级评论,添加到对应的孩子ul列表中
                            newli = "
\
                                        
\
                                            
\
                                                \
                                                下页再停留2  \
                                                2012/02/22\
                                            
\
                                            
\
                                                回复 下页再停留1:\
                                                二级评论二级评论二级评论二级评论二级评论\
                                            
\
                                            
\
                                                回复    \
                                            
\
                                        
\
                                    
";
                            $("li[comment_id='"+parent_id+"']").children("ul").prepend(newli);
                        }
                    }

                }
            })
        }
    })

})

需要注意的是，在追加一级评论的时候，要在 li 后面加上一个 ul，因为追加第二级评论的时候需要找到这个ul，在这个ul下面追加，所以需要预先追加上空的 ul。