評論
- 蓋樓樣式
Paste_Image.png
-
蓋樓樣式代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蓋樓評論樣式</title> <style media="screen"> .container{ width: 400px; height: 600px; background-color: gray; margin:0 auto; } .container .comment { padding: 10px; } .container .comment .floor{ width: 90%; height: auto; border: 1px solid red; margin:5px; text-indent:1em; } </style> </head> <body> <div class="container"> <div class="comment"> <div class="floor"> <div class="floor"> <div class="floor"> <div class="floor"> <p>樓主！</p> </div> <p>這里是1樓表伦！</p> </div> <p>這里是2樓彤钟！</p> </div> <p>這里是3樓!</p> </div> </div> </div> </div> </body> </html> -
實(shí)現(xiàn)绒怨，通過 ajax 來實(shí)現(xiàn)獲取數(shù)據(jù)和添加敌卓！
準(zhǔn)備 json 數(shù)據(jù)var data = [ { "plid": "1", "plName": "twitch", "pltime": "2016082301", "plcontent": "蓋樓樣式評論千绪，真的好嘛 !" }, { "plid": "2", "plName": "twitch", "pltime": "2016082302", "plcontent": "蓋樓樣式評論池摧，一樓路過!" }, { "plid": "3", "plName": "twitch", "pltime": "2016082303", "plcontent": "蓋樓樣式評論荔泳，二樓路過 !" }, { "plid": "4", "plName": "twitch", "pltime": "2016082304", "plcontent": "蓋樓樣式評論，三樓路過 !" } ]; js代碼尊流，將json 數(shù)據(jù)進(jìn)行包裝填充到頁面中去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蓋樓評論樣式</title>
<style media="screen">
.container{
width: 400px;
height: 600px;
background-color: gray;
margin:0 auto;
}
.container .comment {
padding: 10px;
}
.floor{
width: 90%;
height: auto;
border: 1px solid red;
margin:5px;
text-indent:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="comment">
</div>
</div>
<script type="text/javascript">
var data = [
{
"plid": "1",
"plName": "twitch",
"pltime": "2016082301",
"plcontent": "蓋樓樣式評論帅戒，真的好嘛 !"
},
{
"plid": "2",
"plName": "twitch",
"pltime": "2016082302",
"plcontent": "蓋樓樣式評論，一樓路過!"
},
{
"plid": "3",
"plName": "twitch",
"pltime": "2016082303",
"plcontent": "蓋樓樣式評論崖技，二樓路過 !"
},
{
"plid": "4",
"plName": "twitch",
"pltime": "2016082304",
"plcontent": "蓋樓樣式評論逻住，三樓路過 !"
}
];
var result = "";
result += '<div class="floor">';
for(var i=1;i<data.length;i++){
result += "<div id='fl"+ data[i].plid + "' class='floor'>";
};
for(var i=1;i<data.length;i++){
result += "<p>"+ data[i].plcontent+ "</p></div>";
};
result += "<p>"+ data[0].plcontent+ "<P></div>";
document.getElementById("comment").innerHTML = result;
</script>
</body>
</html>
-
數(shù)據(jù)庫存儲結(jié)構(gòu)
{ "_id":ObiectId("57baf5b16bd4cda73990cfd0"), "_gid":"5703a45ed3db3a121c4a3d2e", "_status":0, "_contents":[ { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, { "_userPhone":"12345678911", "_content":"test", "_id":ObjectId("57baf5b16bd4cda73990cfd1"), "_addTime":ISODate("2016-08-22T12:53:05.032Z") }, ], "__v":3 } -
回復(fù)功能
$('.goodscsheia').click(function(){ var content = $('#sendM').val(); var cid = $(this).data('cidd'); $.ajax({ url:'http://x.x.x.x:3000/admin/disAdd', data:{ id:cid, con:content }, type:'post', dataType:'json', success:function(data){ if(data.result == 'yes'){ $('#sendM').val(' '); getDiscuss(); }else if(data.result == 'noLogin'){ $('#hiddenLogin').click(); } } }); }); -
評論模塊
function doDiscuss(){ var con = $('#sendM').val(); $.ajax({ url:'http://x.x.x.x:3000/admin/doDiscuss', data:{ content:con, gid:goodsId }, dataType:'json', type:'post', success:function (data){ if(data.result == 'yes'){ $('#sendM').val(' '); getDiscuss(); alert('發(fā)布成功'); }else if(data.result == 'noLogin'){ $('#hiddenLogin').click(); } } }); } -
表單序列化
$('div').test($("form").serialize());
