收藏
批改状态：未批改
老师批语：
作业总结：
1 新知识点
.on()方法应用在被选定元素上添加一个或者多个事件
.parents()查找指定元素的祖先元素 可以在括号内指定元素类名,
.prev()查找当前同级元素的上一个元素，括号内不用写内容
.parseInt() 解析一个字符串变量并返回一个整数js的函数
.find() 查找指定元素 比如 .find('.length')
$(document).on() 这个‘组合’是给当前文档 中选择的元素做处理，好处是避免全局其他的相同元素都跟着变化。
2 课程理解
获取并修改输入字数
获取文本框的class名，使用.on方法在.on方法内部使用keyup事件并使用函数。函数体内先获取一下当前文本框内容的长度，并复制给新变量 len。找到当前文本框的祖先元素 .text-box，然后查找到字数计数的元素 .length，使用.text()函数让总字数140减去刚才的存放字数的变量 len 。
回复按钮的事件处理
使用$(document).on是设置当前文档的回复按钮点击的方法。使用prev()找到当前元素（按钮）的同级上一个紧邻的兄弟元素（就是文本框）顺便获取一下内容并赋值给新变量 val。然后if判断一下获取到的val变量是否是空值if（val==0） 如果是空值就弹出警告框，如果不是空值就获取一下当前时间，并且把年月日等组合赋值给变量y。找到每次发布都相同的html代码，在新变量内部进行组合。把获取到的时间变量放到html内的时间标签内，把获取到的内容val变量放到发布的内容区内，最重要的一点是html变量内的值，也就是这些html代码之间不能有换行、空格，必须紧挨着放在一起。
然后使用$(this).parents('.box').find('.comment-list').append(html),这句话的意思是查找到当前元素的祖先级元素 .box 然后从祖先级元素往下找，找到'.comment-list'，在这个元素的最后面添加上修改组合后的变量 html。
发布之后要清空输入框，同样是找到当前元素的祖先级元素 '.box' ，然后再使用find找到子元素'.comment' 使用val('')让内容为空（就是输入的文本框）
发布之后要初始化输入的字数，同样是找到当前元素的祖先级元素 '.box'，然后使用find找到子元素 .length，使用 .text('0') 让输入字数为0。
设置一下输入框的高度，当前元素，也就是点击按钮的同级上一个元素（输入框）$(this).prev().height(20)
删除评论
使用$(document).on('click','.comment-operate'),当前文本.comment-operate元素被点击的时候执行函数。如果if(confirm('确定删除吗'))，这个if里面的是一个弹窗，确定表示为真，否为假。如果确定删除就执行找到当前元素的诛仙元素.comment-box，使用remove移出。
给评论框加高度
使用$(document).on('click','.comment',function(){})当文档中的元素被点击的时候，这个元素的高度增加80像素
$(document).on('click','.comment',function(){$(this).height(80)})
点赞功能
使用$(document).on('click','.comment-praise',function(){})，在点击文档中的当前元素后执行函数，使用字符串转增数的函数parseInt把当前元素里的total值 +1 转整后赋值给变量 num，也就是$num = parseInt($(this).attr('total'))+1;使用 $(this).attr('total',num)修改当前的标签内total的值为获取到的num变量值。使用$(this).html(num+'赞')，刚才修改完标签内的total值后还需要修改前端的元素内容，让赞前面显示数字，数字就使用num。
删除动态（作业）
使用$(document).on('click','.close'function(){})当点击当前文档里的'.close'元素后执行函数，函数体内是找到当前元素的祖先级元素.box，然后使用 .remove()进行删除。
<!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.3.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: 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-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">
// on()方法可以在被选元素及子元素上添加一个或者多个事件处理程序 绑定事件 动态绑定
// keyup 是jq的键盘事件
$(function(){
// $('.length').css('color','red')
$('.comment').on('keyup',function(){
// 获取当前comment内部的值和长度值
var len = $(this).val().length;
// 先获取一下当前元素的父级元素是否是.text-box,然后再找子孙元素.length 再使用text 使用总长度减去获取的长度
$(this).parents('.text-box').find('.length').text(140-len)
})
// 获得当前页面文档中的回复按钮
// 在文档中绑定一个click给btn按钮并给一个函数
$(document).on('click','.btn',function(){
// .prev()紧邻同级前一个同胞元素 然后获得内部的内容
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();
// console.log(y)
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').append(html);
// 清空输入框
$(this).parents('.box').find('.comment').val('');
// 初始化输入字数
$(this).parents('.box').find('.length').text('0');
// 输入完之后初始化高度
$(this).prev().height(20)
// $('.comment-list')
}
})
// 动态删除 如果不用document 只能删除第一个
// $('.comment-operate').on('click',function(){
// if(confirm('确定删除吗')){
// // 这个父级 .comment-box 删除
// $(this).parents('.comment-box').remove()
// }
// })
$(document).on('click','.comment-operate',function(){
if(confirm('确定删除吗')){
// 这个父级 .comment-box 删除
$(this).parents('.comment-box').remove()
}
})
// 给评论框加高度
$(document).on('click','.comment',function(){
// 增加评论框高度是80
$(this).height(80)
})
// 给评论点赞
$(document).on('click','.comment-praise',function(){
// 获得当前元素内部的属性 parseInt是转换成数字
var num = parseInt($(this).attr('total'))+1;
$(this).attr('total',num);
// 把数字再转换成文字
$(this).html(num+'赞')
})
$(document).on('click','.praise',function(){
// 获得当前元素内部的属性 parseInt是转换成数字
$(this).attr('total','0');
var num = parseInt($(this).attr('total'))+1;
$(this).attr('total',num);
// 把数字再转换成文字
$(this).html(num+'赞')
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
