jquery制作微博点赞功能—
实例
<!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-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>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var zan = 4;
var zan2 = 1;
$(function () {
// on()方法可以在被选元素及子元素上添加一个或多个事件处理程序;绑定事件 动态绑定动态生成的元素
$('.comment').on('keyup', function () {
var len = $(this).val().length;
$(this).parents('.text-box').find('.length').text(140 - len);
})
$(document).on('click', '.btn', function () {
//遍历方法prev()获得元素紧邻前一个同胞元素
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();
var html =
'<div class="comment-box clearfix" user="other"><img class="myhead" src="static/images/3.png" alt=""><div class="comment-content"><p class="comment-text">' +
val + '</p><p class="comment-time">' + yy +
'<a href="javascript:;" class="comment-praise" total="0" my="0">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);
})
$('.info .praise').on('click',function () {
$(this).toggleClass('praise_2 praise');
if ($(this).hasClass("praise_2")) {
zan++;
$('.info+.praises-total').addClass('praises-total2');
} else {
zan--;
$('.info+.praises-total').removeClass('praises-total2');
}
var html = zan + '个人觉得很赞';
$('.info+.praises-total').html(html);
});
$('.box').on('click','.comment-praise',function () {
$(this).addClass('comment-praise2');
var a = parseInt($(this).text())
a++;
var html = a + "赞";
$(this).html(html);
})
$('.close').on('click',function () {
if (confirm("确定要删除说说吗?"))
$(this).parent().remove();
})
$('.box').on('click','.comment-operate',function(){
$(this).parents('.comment-box').remove();
})
})
</script>
</html>
<style>
</style>点击 "运行实例" 按钮查看在线实例
制作点赞的方法——
通过click事件实现，需注意关于元素的class的操作
$('.info .praise').on('click',function () {
$(this).toggleClass('praise_2 praise');
if ($(this).hasClass("praise_2")) {
zan++;
$('.info+.praises-total').addClass('praises-total2');
} else {
zan--;
$('.info+.praises-total').removeClass('praises-total2');
}
var html = zan + '个人觉得很赞';
$('.info+.praises-total').html(html);
}); 制作删除功能的方法——
通过remove()的方法删除所有的元素
$('.close').on('click',function () {
if (confirm("确定要删除说说吗?"))
$(this).parent().remove();
})
$('.box').on('click','.comment-operate',function(){
$(this).parents('.comment-box').remove();
}) 对于留言框的jquery操作——
难点：append()在父元素中的最后一个子元素后插入一个元素
$('.comment').on('keyup', function () {
var len = $(this).val().length;
$(this).parents('.text-box').find('.length').text(140 - len);
})//计数的方法
$(document).on('click', '.btn', function () {
//遍历方法prev()获得元素紧邻前一个同胞元素
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();
var html =
'<div class="comment-box clearfix" user="other"><img class="myhead" src="static/images/3.png" alt=""><div class="comment-content"><p class="comment-text">' +
val + '</p><p class="comment-time">' + yy +
'<a href="javascript:;" class="comment-praise" total="0" my="0">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);
})总结：难点在与on()方法，当时使用click时发现无法绑定动态生成的新的元素节点，后想起老师使用on的方法动态绑定，故事用次方法，但仍无效果，经过查找资料后发现使用on方法时前面的父节点必须是非动态生成的父节点，之后成功绑定。
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
