<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>评论功能</title>
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="list">
<div class="box">
<a class="close" href="javascript:">x</a>
<img class="head" src="static/images/1.png">
<div class="content">
<div class="main">
<p><span>西门大官人:</span> ~ All the luck is for you. ~</p>
<img class="img" src="static/images/img1.jpg">
</div>
<div class="info">
<span class="time">04-17 10:00</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praise-num"><span class="praise-total">4</span>个人觉得很赞</div>
<div class="comment-list">
<div class="comment-box">
<img class="myhead" src="static/images/4.jpg">
<div class="comment-info">
<p class="comment-text"><span>我：</span>你说的都对</p>
<p class="comment-time">2019-01-19 14:36
<a class="comment-praise" href="javascript:;" total="0">赞</a>
<a class="comment-del" href="javascript:;">删除</a>
</p>
</div>
</div>
</div>
<div class="txt-list">
<textarea class="reply" placeholder="评论…"></textarea>
<button class="reply_btn">回复</button>
<span class="reply_char"><span class="char_length">0</span>/140</span>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(document).on('click','.praise',function(){
var total=parseInt($(this).parents('.content').find('.praise-total').text())+1;
$(this).parents('.content').find('.praise-total').text(total);
})
$(document).on('click','.comment-praise',function(){
//('.comment-praise').on('click',function(){
var num=parseInt($(this).attr('total'))+1
$(this).attr('total',num);
$(this).html(num+'赞')
})
$(document).on('click','.comment-del',function(){
if(confirm('你确定删除吗?')){
$(this).parents('.comment-box').remove();
}
})
$('.reply').click(function(){
//alert('123');
// $(this).css('height',80);
$(this).css({'height':'80','width':'100%'});
})
var i=0;
if(i<140){
$('.reply').keyup(function(){
if($(this).val().length<=140){
$(this).parents().find('.char_length').text($(this).val().length);
}
else{
//alert("回复字数超限!");
}
i=$(this).val().length;
console.log(i);
})
}else{
$(this).removeAttr('disabled','true');
}
$(document).on('click','.reply_btn',function(){
if($(this).siblings('.reply').val().length<=0){
alert("回复不能为空");
}else{
var date=new Date()
var dateHtml=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
// console.log(dateHtml);
// console.log($(this).siblings('.reply').val());
var html='<div class="comment-box"><img class="myhead" src="static/images/4.jpg"><div class="comment-info"><p class="comment-text"><span>我：</span>'+$(this).siblings('.reply').val()+'你说的都对</p><p class="comment-time">'+dateHtml+'<a class="comment-praise" href="javascript:;" total="0">赞</a><a class="comment-del" href="javascript:;">删除</a></p></div></div>'
$(this).parents('.content').find('.comment-list').append(html);
$(this).parents('.content').find('.reply').val("");
$(this).siblings('.reply').height(20);
$(this).siblings('.reply_char').children().text(0);
}
})
})
</script>
</body>
</html>