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

时间：2019-09-24 21:08:47 阅读：133 评论：0 收藏：0 [点我收藏+]

标签：style += class 20px after cti news return ajax

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>

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

标签：style += class 20px after cti news return ajax

原文地址：https://www.cnblogs.com/qvpenglou/p/11580894.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行