实例
<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="list">
<div class="box clearfix">
<!-- 删除说说按钮 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/1.png" alt="">
<div class="content">
<div class="main">
<p class="txt">
<span class="user">西门大官人: </span>
~ All the luck is for you. ~
</p>
<img class="pic" src="static/images/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->
<div class="comment-list">
<!-- 每次评论要添加的内容跟标签 -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="static/images/4.jpg" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>你说的都对……</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
<!--添加结束-->
</div>
<!--评论内容结束-->
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
<div class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">欧阳克 : </span>三亚的海滩很漂亮。
</p>
<img class="pic" src="static/images/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: block;">0个人觉得很赞</div>
<div class="comment-list">
<div class="comment-box clearfix" user="other">
<img class="myhead" src="static/images/3.png" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// $('.comment').on('keyup',function(){//绑定静态控件(函数中的没有对用JS新产生的元素进行处理的语句)时，与下方格式效果相同
$('.comment').keyup(function(){
var len=$(this).val().length;
$(this).parents('.text-box').find('.length').text(len)
})
$('.comment').on('click',function(){
// $(this).css({'height':'100px'})//用下方格式也可以
$(this).height(100)
})
// $('.btn').click(function(){//第一种格式
// $('.btn').on('click',function(){第二种格式
//对于本例来说，这上下三种格式都可以使用，但是实战中必须要用第三种格式，因为说说的整个元素也将是用JS生成。
$(document).on('click','.btn',function(){//（第三种格式）这段语句的含义：在文档中找到包含'.btn'（class="btn"）的元素,并给它s动态绑定一个click事件，当事件触发时执行function函数！
var val=$(this).prev().val();
if(val==''){
alert('对不起,留言不能为空!');
}else{
var date=new Date();
var y=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
var html='<div class="comment-box clearfix" user="self"><img class="myhead" src="static/images/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'</p><p class="comment-time">'+y+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>'
//添加评论
$(this).parents('.box').find('.comment-list').prepend(html)
//清空输入框
$(this).parents('.box').find('.comment').val("")
//初始化输入字数
$(this).parents('.box').find('.length').text("0")
$(this).prev().height(15)
}
})
//删除评论
$(document).on('click','.comment-operate',function(){
if(confirm('确定删除么?')){
$(this).parents('.comment-box').remove();
}
})
//评论赞
$(document).on('click','.comment-praise',function(){
var num=parseInt($(this).attr('total'))+1;
$(this).attr('total',num);
$(this).html(num+'赞')
})
//说说赞
$(document).on('click','.praise',function(){
var num=parseInt($(this).parents('.box').find('.praises-total').attr('total'))+1;
$(this).parents('.box').find('.praises-total').attr('total',num);//这两句语句实则是实现了num的一个累加循环，思路：num先等于total+1，而后将num值赋给total，接下来再进行total+1，再赋值，如此循环！点一次赋值一次！实现了保存num的累加后的值，好思路！
$(this).parents('.box').find('.praises-total').html(num+'个人觉得很赞')
// $(this).attr('class','praise_2')//改变class，点赞只能一次
$(this).css({
'background': 'url(static/images/bg3.jpg) no-repeat left top'
})//改变class的一个属性值，点赞的数量可以一直累加
})
$(document).on('click','.close',function(){
if(confirm('确定删除么？')){//confirm()是确认对话框，用来删除内容时确认使用
$(this).parents('.box').remove();
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例