thinkphp+jqery实现两级评论回复效果

这个不是无限级评论,只有两层,实现起来比较简单点,所有评论的parent_id都是对应的第一级评论的id,新增评论的时候,就在对应的评论下面追加,并且用prepend()把最新评论放到最前面

 

数据库设计(我这里没有真正用到数据库,为了测试,用的都是写死的假数据,所以后台请求的接口只是返回了一个code==200)

 

 

 html代码

    <div style="font-size: 0.28rem; padding: .2rem; ">
            <div class="layui-row" >
                <textarea style=" width: 90%; height: 1rem;resize: none; margin-left: .2rem; padding: 0.1rem" replyid="0"></textarea>
            </div>
            <div class="layui-row" >
                
                <div class="comment-submit" parent_id="0" style="float: right;background-color:#3385ff;font-size:0.22rem; padding:0.07rem 0.15rem;margin-right: 0.3rem">
                    <a  style="color:#fff;" href="javascript:void(0);" parent_id="0">发表评论</a>
                </div>
            </div>
            <div class="layui-row" style="margin: .2rem; ">
                评论区
            </div>
            
            <!-- 评论 start -->
            <div class="layui-row" style="line-height: 0.6rem; ">
                <!-- 一级评论列表 -->
                <ul class="comment-ul">
                    <li comment_id='1'>
                        <hr style="margin: .2rem auto;">
                        <div style=" width: 95%;margin: 0 auto">
                            <div  style="margin: .2rem 0; ">
                                <img src="/personal/images/touxiang.jpg" style="width: .6rem; height: .6rem; ">
                                <span style="padding-left: .1rem; font-weight: bold;">下页再停留1</span>
                                <span style="float: right; font-size: 0.26rem; color: #949494">2012/02/22</span>
                            </div>
                            <div style="padding: 0 .2rem 0 .2rem">哪些中草药容易引起肝损伤?</div>
                            <div class="comment-reply" comment_id="1"  style="text-align: right; margin-right: .3rem; font-size: 0.26rem">
                                <a  href="javascript:void(0);" style="color: #8590a6">回复</a>    
                            </div>
                        </div>
                        <!-- 二级评论列表 -->
                        <ul class="children" style="margin-left: .2rem">
                            
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 评论 end -->
            
        </div>

js代码  (接口没有实际作用,为了测试只返回了一个code==200)

$(function(){

    // 点击“回复”按钮显示或隐藏回复输入框
    $("body").delegate(".comment-reply","click",function () {

        if ($(this).next().length > 0) {    //判断回复框div是否存在,存在就去除
            $(this).next().remove();
        }else{    //添加回复idv
            $(".comment-reply").next().remove();    //删除已经存在的所有回复div
            // 添加当前回复div
            var parent_id = $(this).attr("comment_id");        //要回复的评论id
            var divhtml = "";

            divhtml = "<div >\
                        <div class='layui-row'>\
                            <textarea style='width: 90%; min-height: 0.5rem;resize: none; margin-left: .2rem; padding: 0.1rem; border-radius: 5px;'></textarea>\
                        </div>\
                        <div class='layui-row'>\
                            <button type='button' class='layui-btn layui-btn-normal layui-btn-xs comment-submit' parent_id='"+parent_id+"' style='background: #3385ff; float: right; margin: 0 0.2rem 0.1rem 0'>回复</button>\
                        </div>\
                      </div>";
            $(this).after(divhtml);
        }
    });

    //点击提交评论的内容
    $("body").delegate(".comment-submit","click",function () {
        var content = $.trim($(this).parent().prev().children("textarea").val())    //根据布局结构获取当前评论内容
        $(this).parent().prev().children("textarea").val("");    //获取完内容后清空输入框

        if (content == '') {
            alert("评论内容不能为空!");
            // layer.msg('评论内容不能为空', function(){ });
        }else{

            //创建一个对象,存储获取的数据
            // var cmdata = new Object();
            parent_id = $(this).attr("parent_id")    //上级评论id
            head_pic = '/personal/images/touxiang.jpg'    //获取评论者的头像
            nickname = '测试昵称'    //获取评论者的昵称

            // 如果是一级评论 被回复人为空,如果不是一级评论,添加被回复人昵称
            if (parent_id !== "0") {

                var receive_nickname = $(this).parent().prev().parent().prev().prev().prev().children("span").eq(0).text()    //获取被回复人的昵称
                content = "回复 <span style='color:#8590a6'> "+ receive_nickname +"</span>:"+content        //拼接二级评论内容 被回复人昵称+内容
            }

            // 提交数据
            $.ajax({
                url:"/home/xszx/addComment",
                type:"POST",
                dataType:"Json",
                data:{content:content, parent_id:parent_id, head_pic:head_pic, nickname:nickname},
                success:function (data) {
                    console.log(data)
                    if (data.code == 200) {

                        $(".comment-reply").next().remove();    //删除已经存在的所有回复框div

                        console.log(parent_id)
                        // 显示新增评论
                        var newli =  "";
                        if (parent_id == "0") {
                            // 一级评论,添加到一级ul列表中
                            newli = "<li comment_id='3'>\
                                        <hr style='margin: .2rem auto;'>\
                                        <div style='width: 95%;margin: 0 auto'>\
                                            <div style='margin: .2rem 0;'>\
                                                    <img src='/personal/images/touxiang.jpg' style='width: .6rem; height: .6rem;'>\
                                                    <span style='padding-left: .1rem; font-weight: bold;'>下页再停留1</span>\
                                                    <span style='float: right; font-size: 0.26rem; color: #949494'>2012/02/22</span>\
                                            </div>\
                                            <div style='padding: 0 .2rem 0 .2rem'>\
                                                一级评论一级评论一级评论一级评论\
                                            </div>\
                                            <div comment_id=3 class='comment-reply' style='text-align: right; margin-right: .3rem; font-size: 0.26rem'>\
                                                <a href='javascript:void(0);' style='color: #8590a6'>回复</a>    \
                                            </div>\
                                        </div>\
                                        <ul class='children' style='margin-left: .2rem'>\
                                        </ul>\
                                    </li>";
                            $(".comment-ul").prepend(newli);

                        }else{
                            //二级评论,添加到对应的孩子ul列表中
                            newli = "<li comment_id='"+parent_id+"'>\
                                        <div style='width: 90%;margin: 0 auto; border-top: 1px dotted #E5E5E5'>\
                                            <div  style='margin: .2rem 0'>\
                                                <img src='/personal/images/touxiang.jpg' style='width: .6rem; height: .6rem;'>\
                                                <span style='padding-left: .1rem; font-weight: bold;'>下页再停留2 </span> \
                                                <span style='float: right; font-size: 0.26rem; color: #949494'>2012/02/22</span>\
                                            </div>\
                                            <div style='padding: 0 .2rem 0 .2rem'>\
                                                回复 <span style='color: #8590a6'>下页再停留1</span>:\
                                                二级评论二级评论二级评论二级评论二级评论\
                                            </div>\
                                            <div comment_id='"+parent_id+"' class='comment-reply' style='text-align: right; margin-right: .2rem; font-size: 0.26rem'>\
                                                <a  href='javascript:void(0);' style='color: #8590a6'>回复</a>    \
                                            </div>\
                                        </div>\
                                    </li>";
                            $("li[comment_id='"+parent_id+"']").children("ul").prepend(newli);
                        }
                    }

                }
            })
        }
    })

})

需要注意的是,在追加一级评论的时候,要在 li 后面加上一个 ul,因为追加第二级评论的时候需要找到这个ul,在这个ul下面追加,所以需要预先追加上空的 ul。

 

原文地址:https://www.cnblogs.com/zxf100/p/12564615.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


(1)创建数据表: CREATE TABLE IF NOT EXISTS `think_form` (   `id` smallint(4) unsigned NOT NULL AUTO_INCREMENT,
组合查询的主体还是采用数组方式查询,只是加入了一些特殊的查询支持,包括字符串模式查询(_string)、复合查询(_complex)、请求字符串查询(_query),混合查询中的特殊查询每次查询只能定义一个,由于采用数组的
(1)创建模版:/App/Home/View/Form/edit.html   <FORM method=\"post\" action=\"__URL__/update\">
自定义配置文件user.php: <?php return array(    \'sex\'=>\'man\', ); config.php: <?php return array(
在一些成熟的CMS系统中,后台一般都包含一个配置中心(如织梦后台中系统设置),以方便站长在后台修改配置文件;那么这个功能是如果实现的呢?在ThinkPHP中有没有捷径可走呢?答案肯定是有的。下面大概说一下这个功能
废话不多说先上图预览下,即本博客的分页; 这个分页类是在thinkphp框架内置的分页类的基础上修改而来,原分页类的一些设计,在实际运用中感觉不是很方便;
在php中截取字符串的函数有很多,而在thinkphp中也可以直接使用php的函数,本文给大家简单的介绍thinkPHP模板中截取字符串的具体用法,希望能对各位有所帮助。
thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来。
配置数据库:/app/Common/Conf/config.php 方法一: // 添加数据库配置信息 \'DB_TYPE\'   => \'mysql\',// 数据库类型
/app/Home/Controller/IndexController.class.php
(1)创建数据表: CREATE TABLE IF NOT EXISTS `think_data` (   `id` int(8) unsigned NOT NULL AUTO_INCREMENT,
(1)控制器设置:/app/Home/Controller/IndexController.class.php <?php namespace HomeController; use ThinkController;
(1)普通模式 http://localhost/index.php?m=module&a=action&var=value m参数表示模块,a操作表示操作(模块和操作的URL参数名称是可以配置的),后面的表示其他GET参数。
入库的时候用htmlspecialchars()处理含有html代码的内容 输出的时候用htmlspecialchars_decode()处理含有html代码的内容
<?php define(\'APP_NAME\',\'app\'); define(\'APP_PATH\',\'./app/\'); define(\'APP_DEBUG\',TRUE); // 开启调试模式
(1)创建控制器中定义read方法:/App/Home/Controller/FormController.class.php public function read($id=0){
一、实现不同字段相同的查询条件 $User = M(\"User\"); // 实例化User对象 $map[\'name|title\'] = \'thinkphp\';
如果你的数据完全是内部操作写入而不是通过表单的话(也就是说可以充分信任数据的安全),那么可以直接使用add方法,如:
查询表达式的使用格式: $map[\'字段名\'] = array(\'表达式\',\'查询条件\'); 表达式不分大小写,支持的查询表达式有下面几种,分别表示的含义是:
一、使用字符串作为查询条件 $User = M(\"User\"); // 实例化User对象 $User->where(\'type=1 AND status=1\')->select();