php無限級分類實現(xiàn)評論及回復功能

第php無限級分類實現(xiàn)評論及回復功能(1).展示頁面的整體結構設計

實際效果:

頁面html代碼:

!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"

htmllang="en"

head

metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"

titlephp無限級分類實戰(zhàn)————評論及回復功能/title

linkrel="stylesheet"type="text/css"href="/Public/css/comment.css"rel="externalnofollow"

scripttype="text/javascript"src="/Public/js/jquery-1.11.3.min.js"/script

scripttype="text/javascript"src="/Public/js/comment.js"/script

/head

body

div

!--發(fā)表評論區(qū)begin--

div

div

span{$num}條評論/span

/div

div

div

textareareplyid="0"/textarea

/div

div

aparent_id="0"style=""href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"spanstyle=''發(fā)表評論/span/a

/div

/div

/div

!--發(fā)表評論區(qū)end--

!--評論列表顯示區(qū)begin--

!--{$commentlist}--

div

divspan全部評論/span/div

div

!--一級評論列表begin--

volistname="commlist"id="data"

licomment_id="{$data.id}"

div

div

imgsrc="{$data.head_pic}"alt=""

/div

div

div

span{$data.nickname}/span

span{$data.create_time}/span

/div

div

{$data.content}

/div

div

acomment_id="{$data.id}"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復/a

/div

/div

/div

!--二級評論begin--

volistname="data.children"id="child"

licomment_id="{$child.id}"

div

div

imgsrc="{$child.head_pic}"alt=""

/div

div

div

span{$child.nickname}/span

span{$child.create_time}/span

/div

div

{$child.content}

/div

div

areplyswitch="off"comment_id="{$child.id}"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復/a

/div

/div

/div

!--三級評論begin--

volistname="child.children"id="grandson"

licomment_id="{$grandson.id}"

div

div

imgsrc="{$grandson.head_pic}"alt=""

/div

div

div

span{$grandson.nickname}/span

span{$grandson.create_time}/span

/div

div

{$grandson.content}

/div

div

!--acomment_id="1"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復/a--

/div

/div

/div

/li

/volist

/ul

!--三級評論end--

/li

/volist

/ul

!--二級評論end--

/li

/volist

/ul

!--一級評論列表end--

/div

/div

!--評論列表顯示區(qū)end--

/div

/body

/html

(2).單個評論信息div結構代碼

div

div

imgsrc="{$data.head_pic}"alt=""

/div

div

div

span{$data.nickname}/span

span{$data.create_time}/span

/div

div

{$data.content}

/div

div

acomment_id="{$data.id}"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復/a

/div

/div

/div

對應的效果圖:

對應的css代碼:

.head-pic{

width:40px;

height:40px;

position:relative;

top:0px;

left:40px;

top:-40px;

width:600px;

.cm-header{

padding-left:5px;

.cm-content{

padding-left:5px;

.cm-footer{

padding-bottom:15px;

text-align:right;

border-bottom:1pxdotted#CCC;

.comment-reply{

text-decoration:none;

color:gray;

font-size:14px;

4.JS代碼

(1).提交評論:提交評論的a標簽按鈕引用了樣式comment-submit，在其點擊事件中進行ajax操作

$('body').delegate('.comment-submit','click',function(){

varcontent=$.trim($(this).parent().prev().children("textarea").val());//根據(jù)布局結構獲取當前評論內容

$(this).parent().prev().children("textarea").val("");//獲取完內容后清空輸入框

if(""==content){

alert("評論內容不能為空!");

}else{

varcmdata=newObject();

cmdata.parent_id=$(this).attr("parent_id");//上級評論id

cmdata.content=content;

cmdata.nickname="游客";//測試用數(shù)據(jù)

cmdata.head_pic="/Public/images/default.jpg";//測試用數(shù)據(jù)

varreplyswitch=$(this).attr("replyswitch");//獲取回復開關鎖屬性

$.ajax({

type:"POST",

url:"/index.php/home/index/addComment",

data:{

comment:JSON.stringify(cmdata)

dataType:"json",

success:function(data){

if(typeof(data.error)=="undefined"){

$(".comment-reply").next().remove();//刪除已存在的所有回復div

//更新評論總數(shù)

$(".comment-num").children("span").html(data.num+"條評論");

//顯示新增評論

varnewli="";

if(cmdata.parent_id=="0"){

//發(fā)表的是一級評論時，添加到一級ul列表中

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+data.create_time+"/span/divdivp"+data.content+"/p/divdivacomment_id='"+data.id+"'href='javascript:void(0);'回復/a/div/div/divul/ul/li

$(".comment-ul").prepend(newli);

}else{

//否則添加到對應的孩子ul列表中

if('off'==replyswitch){//檢驗出回復關閉鎖存在，即三級評論不再提供回復功能

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+data.create_time+"/span/divdivp"+data.content+"/p/divdiv/div/div/divul/ul/li

}else{//二級評論的回復按鈕要添加回復關閉鎖屬性

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+