Correction status:Uncorrected
Teacher's comments:
<!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"> </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-24 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: none;"></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-24 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 src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $('.comment').on('keyup',function(){ var len=$(this).val().length; $(this).parents('.text-box').find('.length').text(140-len); }) $(document).on('click','.btn',function(){ var val=$(this).prev().val(); if(val==''){ alert('留言不能为空'); }else{ var date=new Date(); var yy=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">'+yy+'<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').append(html); $(this).parents('.box').find('.comment').val(''); $(this).parents('.box').find('.length').text('0'); $(this).prev().height(20); } }) $('.comment').click(function(){ $(this).height(80); }) $('.praise').on('click',function(){ $(this).attr('class','praise_2'); }) $(document).on('click','.comment-praise',function(){ var num=parseInt($(this).attr('total'))+1; $(this).attr('total',num); $(this).html(num+'赞'); }); $(document).on('click','.comment-operate',function(){ if(confirm('要删除吗')){ $(this).parents('.comment-box').remove(); } }) $(document).on('click','.close',function(){ if(confirm('要删除吗')){ $(this).parents('.box').remove(); } }) }) </script> </body> </html>
点击 "运行实例" 按钮查看在线实例