thinkphp+jquery to achieve two-level comment reply effect

This is not an infinite level comment, but only two levels. It's easy to implement. The parent id of all comments is the id of the corresponding first level comment. When adding a comment, add it under the corresponding comment, and put the latest comment in the front with prepend()

 

 

Database design (I don't really use the database here. In order to test, I use dead data, so the interface requested by the background just returns a code==200)

 

 

html code

    <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">Comment</a>
                </div>
            </div>
            <div class="layui-row" style="margin: .2rem; ">
                Comment area
            </div>
            
            <!-- comment start -->
            <div class="layui-row" style="line-height: 0.6rem; ">
                <!-- First level comment list -->
                <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;">Next page 1</span>
                                <span style="float: right; font-size: 0.26rem; color: #949494">2012/02/22</span>
                            </div>
                            <div style="padding: 0 .2rem 0 .2rem">Which Chinese herbal medicines are easy to cause liver damage?</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">Reply</a>    
                            </div>
                        </div>
                        <!-- Secondary comment list -->
                        <ul class="children" style="margin-left: .2rem">
                            
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- comment end -->
            
        </div>

js code (the interface has no actual function, only one code = = 200 is returned for testing)

$(function(){

    // Click "reply" button to show or hide the reply input box
    $("body").delegate(".comment-reply","click",function () {

        if ($(this).next().length > 0) {    //Judge reply box div If it exists, it will be removed
            $(this).next().remove();
        }else{    //Add reply idv
            $(".comment-reply").next().remove();    //Delete all existing replies div
            // Add current reply div
            var parent_id = $(this).attr("comment_id");        //Comments to reply to id
            var divhtml = "";

            divhtml = "<div >\
                        <div class='layui-row'>\
                            <textarea style='width: 90%; min-height: 0.5rem;resize: none; margin-left: .2rem; padding: 0.1rem; border-radius: 5px;'></textarea>\
                        </div>\
                        <div class='layui-row'>\
                            <button type='button' class='layui-btn layui-btn-normal layui-btn-xs comment-submit' parent_id='"+parent_id+"' style='background: #3385ff; float: right; margin: 0.2rem 0.1rem 0 '> reply < / button >\
                        </div>\
                      </div>";
            $(this).after(divhtml);
        }
    });

    //Click to submit comments
    $("body").delegate(".comment-submit","click",function () {
        var content = $.trim($(this).parent().prev().children("textarea").val())    //Get the current comment content according to the layout structure
        $(this).parent().prev().children("textarea").val("");    //Clear the input box after getting the content

        if (content == '') {
            alert("Comment content cannot be empty!");
            // layer.msg('Comment content cannot be empty', function(){ });
        }else{

            //Create an object to store the acquired data
            // var cmdata = new Object();
            parent_id = $(this).attr("parent_id")    //Superior comments id
            head_pic = '/personal/images/touxiang.jpg'    //Get a picture of the reviewer
            nickname = 'Test nickname'    //Get the reviewer's nickname

            // If it is a first level comment and the respondent is blank, add the nickname of the respondent if it is not a first level comment
            if (parent_id !== "0") {

                var receive_nickname = $(this).parent().prev().parent().prev().prev().prev().children("span").eq(0).text()    //Get the nickname of the respondent
                content = "Reply <span style='color:#8590a6'> "+ receive_nickname +"</span>: "+content        //Concatenate the nickname of the respondent of the second level comment+content
            }

            // Submit data
            $.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();    //Delete all existing reply boxes div

                        console.log(parent_id)
                        // Show new comments
                        var newli =  "";
                        if (parent_id == "0") {
                            // First level comment,Add to first level ul List
                            newli = "<li comment_id='3'>\
                                        <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;'>Next page 1</span>\
                                                    <span style='float: right; font-size: 0.26rem; color: #949494'>2012/02/22</span>\
                                            </div>\
                                            <div style='padding: 0 .2rem 0 .2rem'>\
                                                //First level comment first level comment first level comment first level comment\
                                            </div>\
                                            <div comment_id=3 class='comment-reply' style='text-align: right; margin-right: .3rem; font-size: 0.26rem'>\
                                                <a href='javascript:void(0);' style='color: #8590a6 '> reply < / a >\
                                            </div>\
                                        </div>\
                                        <ul class='children' style='margin-left: .2rem'>\
                                        </ul>\
                                    </li>";
                            $(".comment-ul").prepend(newli);

                        }else{
                            //Two level commentary,Add to corresponding child ul List
                            newli = "<li comment_id='"+parent_id+"'>\
                                        <div style='width: 90%;margin: 0 auto; border-top: 1px dotted #E5E5E5'>\
                                            <div  style='margin: .2rem 0'>\
                                                <img src='/personal/images/touxiang.jpg' style='width: .6rem; height: .6rem;'>\
                                                <span style='padding-left: .1rem; font-weight: bold;'>Next page stay 2 </span> \
                                                <span style='float: right; font-size: 0.26rem; color: #949494'>2012/02/22</span>\
                                            </div>\
                                            <div style='padding: 0 .2rem 0 .2rem'>\
                                                //Reply to < span style ='color: A6 '> next page and stay 1 < / span >:\
                                                //Second level comment second level comment second level comment second level comment second level comment\
                                            </div>\
                                            <div comment_id='"+parent_id+"' class='comment-reply' style='text-align: right; margin-right: .2rem; font-size: 0.26rem'>\
                                                <a  href='javascript:void(0);' style='color: #8590a6 '> reply < / a >\
                                            </div>\
                                        </div>\
                                    </li>";
                            $("li[comment_id='"+parent_id+"']").children("ul").prepend(newli);
                        }
                    }

                }
            })
        }
    })

})

It should be noted that when adding a level-1 comment, a ul should be added after li, because the ul needs to be found when adding a level-2 comment, and the ul needs to be added under the ul, so the ul above needs to be added in advance.

Tags: Javascript Database JSON

Posted on Wed, 25 Mar 2020 07:43:17 -0700 by prometheuzz