多级评论回复功能（纯前端，未连数据库）

效果图：

html结构（css我就不放了）：

 

    
     

         
         

             

                 

                     
                 
                 啦啦啦
             
             
发表评论
         
     
     
     

         

    		  
             

                 

                     
                 
                 

                     
升职加薪
                     
哈哈哈哈
                     

                         
                         
                     
                     

                         
                     
                     

                         
                         
                     
                     
                     

                         

                             

                                 
                             
                             

                                 
升职加薪
                                 
哈哈哈哈
                                 

                                     
                                     
                                 
                                 

                                     
                                 
                              
                         
                      
                  
             

         
     
 

JS：

/********   评论区  *********/
//点击二级回复的图标
function clickReplayIcon(e) {
    if ($('.replay-area').is(':visible')) {
        $('.replay-area').remove();
        //动态创建回复框+按钮===replay-area
        $(e).parent().append(' 
\n' +
            '                                        \n' +
            '                                        \n' +
            '                                    
');
    } else {
        //动态创建回复框+按钮===replay-area
        $(e).parent().append(' 
\n' +
            '                                        \n' +
            '                                        \n' +
            '                                    
');
    }


    //点击回复按钮
    $(".replay-area").on('click', '.replay-btn', function () {
        $(e).parents('.comment-list-item').find('.show-my-replay').first().append('
\n' +
            '                                            
\n' +
            '                                                \n' +
            '                                            
\n' +
            '                                            
\n' +
            '                                                
\n' +
            '                                                
\n' +
            '                                                
\n' +
            '                                                    \n' +
            '                                                    \n' +
            '                                                
\n' +
            '                                                
\n' +
            '                                                    \n' +
            '                                                
\n' +
            '                                    
\n' +
            '                                     
\n' +
            '                                        
');


        var newComment = $(".replay-textarea").val().trim();
        var newName = $(".myname").text().trim();
        //获取到的是img标签元素
        var newTx = $(".mytx-box").html();

        /*
        * $(this).parents('.comment-list-item')与$('.show-my-replay')的区别：
        * 前者能对应到相应的li 的评论去中，后者会找到所有的$('.show-my-replay')，并把新获取的内容赋给最后一个$('.show-my-replay')上，，及位置不对应
        * */
        $(e).parents('.comment-list-item').find(".replay-tx").last().html(newTx);
        $(e).parents('.comment-list-item').find(".my-replay-name").last().html(newName);
        $(e).parents('.comment-list-item').find(".my-replay-comment").last().html(newComment);

        $(".replay-textarea").val("");

        //点赞图标
        $(".thumbs-up").on('click', 'img', function () {
            $(e).hide().siblings().show();
        });

        //发送完后 让回复的div消失
        $('.replay-area').remove();

        /*更新总评论数*/
        total_comments_num = $(".comment-content").length;
        $(".total-comments-number").text(total_comments_num);
    });
}

$(function () {

    //点赞图标
    $(".thumbs-up").on('click', 'img', function () {
        $(this).hide().siblings().show();
    });

    $(".replay").click(function () {
        clickReplayIcon(this);
    });

//点击 发表评论
    $(".comment-btn").click(function () {
        $(".textarea").animate({height: "65px"}, 400);
        var newComment = $(".textarea").val().trim();
        var newName = $(".myname").text().trim();
        
        //获取到的是img标签元素
        var newTx = $(".mytx-box").html();

        if (newComment.length == 0) {
            alert("您还没说什么呢~");
        } else {
            //动态创建 li
            $('
\n' +
                '                                
\n' +
                '                                
\n' +
                '                                
\n' +
                '                                    
\n' +
                '                                    
\n' +
                '                                    
\n' +
                '                                        \n' +
                '                                        \n' +
                '                                    
\n' +
                '                                    
\n' +
                '                                        \n' +
                '                                    
\n' +
                '                                    
\n' +
                '                                     
\n' +
                '                                 
\n' +
                '                            
').prependTo("#commentsList");

            $(".user-tx").first().html(newTx);
            $(".user-name").first().html(newName);
            $(".user-comment").first().html(newComment);
            $(".textarea").val("");
        }

        //点击 回复图标
        $(".comment-list-item ").on("click", '.replay', function () {
            clickReplayIcon(this);
        });

    });

});