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

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>
多级评论代码实现（前端篇）

猜你喜欢
