多级评论代码实现（前端篇）

Posted 2022-11-30 qvpenglou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多级评论代码实现（前端篇）相关的知识，希望对你有一定的参考价值。

1.递归法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .comment-box
            margin-left: 20px;
        
    </style>
</head>
<body>
    <div class="item">
        <a news_id="19" class="com">评论</a>
        
    </div>
    <div class="item">
        <a news_id="18" class="com">评论</a>
    </div>
    <div class="item">
        <a news_id="17" class="com">评论</a>
    </div>


    <script src="/static/jquery-2.1.4.min.js"></script>
    <script>
        $(function () 
            bindCommentEvent();
        );
        function bindCommentEvent() 
           $(‘.com‘).click(function () 
               var news_id = $(this).attr(‘news_id‘);
               var _this = $(this);

               $.ajax(
                   url: ‘/comment/‘,
                   type: ‘GET‘,
                   data: news_id: news_id,
                   dataType: "html",
                   success:function (arg) 
                       //create_tree(arg, _this);
                       console.log(arg);
                       _this.after(arg);
                   
               )

           )
        

        function diGui(children_list)
                var html = "";
                $.each(children_list,function (ck,cv) 
                       var b = ‘<div class="comment-box"><span>‘;
                       b+= cv.content + "</span>";
                       b += diGui(cv.children);
                       b += "</div>";
                       html += b;
                 );
                return html;
            


            function create_tree(data,$this) 
                 var html = ‘<div class="comment-list">‘;
                 $.each(data,function (k,v) 
                    var a = ‘<div class="comment-box"><span>‘;
                     a+= v.content + "</span>";
                     // 创建自评论
                     a += diGui(v.children);
                     a+= "</div>";
                     html += a;
                 );

                 html += "</div>";
                $this.after(html);
        


    </script>

</body>
</html>

以上是关于多级评论代码实现（前端篇）的主要内容，如果未能解决你的问题，请参考以下文章

多级评论的实现

Spring Boot制作个人博客-博客详情评论

几行代码实现多级ListView的多级联动效果

简单几步，快速实现封装多级树结构对象（Java版）

JAVA代码实现多级树结构封装对象