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方法时前面的父节点必须是非动态生成的父节点，之后成功绑定。
