thinkphp+jquery實現兩級評論回覆效果

来源:https://www.cnblogs.com/zxf100/archive/2020/03/25/12564615.html

這個不是無限級評論,只有兩層,實現起來比較簡單點,所有評論的parent_id都是對應的第一級評論的id,新增評論的時候,就在對應的評論下麵追加,並且用prepend()把最新評論放到最前面 資料庫設計(我這裡沒有真正用到資料庫,為了測試,用的都是寫死的假數據,所以後臺請求的介面只是返回了一個cod ...


這個不是無限級評論,只有兩層,實現起來比較簡單點,所有評論的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。

 


您的分享是我們最大的動力!

更多相關文章
  • 如今前端開發的任職要求越來越高了,不僅要掌握 javascript,熟悉vue、react等各種框架,甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ,靠扒代碼套用代碼工具就能找到一份相對不錯的工作,看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
  • 模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
  • `react router ^5.1.2` 在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。 在 進行路由管理時,可以使用 組件實現此功能,其中的 屬性可以接受一個函數,返回 的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉; ...
  • HTML 鏈接:HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML 超鏈接(鏈接)? HTML使用標簽 <a>來設置超文本鏈接,是可以從一個頁面指向另一個目的端的鏈接。 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一 ...
  • HTML 段落:段落是通過 <p> 標簽定義的 1 <p>這是一個段落 2 <p>這是另一個段落 註釋:即使忘了使用結束標簽,上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。 HTML 折行:在不產生一個新段落的情況下進行換行(新行),請使用 <b ...
  • 初學編程的小伙伴經常會遇到的問題,1.沒資源 2.沒人帶 3.不知道從何開始 ,小編也是從新手期過來的,所以很能理解萌新的難處,現在整理一些以前自己學習的一些資料送給大家,希望對廣大初學小伙伴有幫助! 這套「web前端入門教程」將多年的編程經驗灌輸其中,典型的實踐派。既適合初學者入門,也適合程式員進 ...
  • RPG系統構造 通過對於鬥羅大陸小說的游戲化過程,熟悉Angular的結構以及使用TypeScript的面向對象開發方法。 "Github項目源代碼地址" 人物 和其他RPG游戲類似,游戲裡面的人物角色大致有這樣的一些屬性:生命值,魔法值(魂力),攻擊力,防禦力,速度。RPG游戲中的角色隨著等級的提 ...
一周排行
  • 前幾天發佈了 "抄抄《CSS 故障藝術》的動畫" 這篇文章,在這篇文章里介紹瞭如何使用Win2D繪製文字然後配合BlendEffect製作故障藝術的動畫。本來打算就這樣收手不玩這個動畫了,但後來又發現性能不符合理想。明明只是做做Resize動畫和用BlendEffect混合,為什麼性能會這麼差呢? ...
  • 控制條控制項: progressBar 不能按照你程式的進程自動變化,需認為計算,調整變化量 private void progressBar1_Click(object sender, EventArgs e) { this.progressBar1.Maximum = 100;//設置進度條最大長 ...
  • 首先創建一個asp.net core web應用程式 第二步 目前官方預置了7種模板項目供我們選擇。從中我們可以看出,既有我們熟悉的MVC、WebAPI,又新添加了Razor Page,以及結合比較流行的Angular、React前端框架的模板項目。 空項目模板 Program.cs using S ...
  • 對閉包的理解 1.對於成員變數和局部變數:成員變數就是方法外部,類的內部定義的變數;局部變數就是方法或語句塊內部定義的變數。局部變數必須初始化。 形式參數是局部變數,局部變數的數據存在於棧記憶體中。棧記憶體中的局部變數隨著方法的消失而消失。成員變數存儲在堆中的對象裡面,由垃圾回收器負責回收。 成員變數它 ...
  • Xamarin.Forms讀取並展示Android和iOS通訊錄 TerminalMACS客戶端 本文同步更新地址: https://dotnet9.com/11520.html https://terminalmacs.com/861.html 閱讀導航: 一、功能說明 二、代碼實現 三、源碼獲取 ...
  • 做下對文件複製操作相關的筆記: /// <summary> /// 文件幫助類 /// </summary> public class FileHelper { /// <summary> /// 複製一個目錄下所有文件到一個新目錄下 /// </summary> /// <param name=" ...
  • 前言 有一個東西叫做鴨子類型,所謂鴨子類型就是,只要一個東西表現得像鴨子那麼就能推出這玩意就是鴨子。 C 裡面其實也暗藏了很多類似鴨子類型的東西,但是很多開發者並不知道,因此也就沒法好好利用這些東西,那麼今天我細數一下這些藏在編譯器中的細節。 不是只有 和 才能 在 C 中編寫非同步代碼的時候,我們經 ...
  • [toc] 1.應用背景 底端設備有大量網路報文(位元組數組):心跳報文,數據採集報文,告警報文上報。需要有對應的報文結構去解析這些位元組流數據。 2.結構體解析 由此,我第一點就想到了用結構體去解析。原因有以下兩點: 2.1.結構體存在棧中 類屬於引用類型,存在堆中;結構體屬於值類型,存在棧中,在一個 ...
  • 《深入淺出 C#》 (第3版) [作者] (美) Andrew Stellman (美) Jennifer Greene[譯者] (中) 徐陽 丁小峰 等譯[出版] 中國電力出版社[版次] 2016年08月 第1版[印次] 2018年04月 第4次 印刷[定價] 148.00元 【引子】 要學習編程 ...
  • 記錄使用對象初始值設定項初始化對象。 using System; using System.Collections.Generic; namespace ConsoleApp2 { class Program { static void Main(string[] args) { // 使用構造函數 ...
x