zoukankan      html  css  js  c++  java
  • 多级评论代码实现(前端篇)

    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>
  • 相关阅读:
    Insertion Sort List
    Max Points on a Line
    Evaluate Reverse Polish Notation
    vue路由传参的三种基本方式
    如何搭建一个vue项目
    vue路由跳转时更改页面title
    CSS清除浮动大全共8种方法
    border:none 与border:0的区别
    for..in和for..of的功能
    IE浏览器兼容问题-----html和css的兼容写法
  • 原文地址:https://www.cnblogs.com/qvpenglou/p/11580894.html
Copyright © 2011-2022 走看看