前端实现点赞评论删除的功能
实例
<!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">
<style>
body {
font-size: 12px;
line-height: 120%;
text-align: center;
color: #333;
padding: 20px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
* {
margin: 0;
padding: 0;
border: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
*height: 1%;
}
#list {
margin: 0 auto;
text-align: left;
width: 540px;
}
.box {
border-top: 1px solid #eee;
position: relative;
width: 540px;
padding: 20px 0
}
.box:hover .close {
display: block;
}
.close {
display: none;
top: 0px;
right: 0px;
width: 28px;
height: 28px;
border: 1px solid #eee;
position: absolute;
background: #f2f4f7;
line-height: 27px;
text-align: center;
}
.close:hover {
background: #c8d2e2;
text-decoration: none;
}
.head {
float: left;
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 25px;
}
.content {
float: left;
width: 440px;
}
.main {
margin-bottom: 10px;
}
.txt {
margin-bottom: 10px;
}
.user {
color: #369;
}
.pic {
margin-right: 5px;
width: 200px;
border: 1px solid #eee;
}
.info {
height: 20px;
line-height: 19px;
font-size: 12px;
margin: 0 0 10px 0;
}
.info .time {
color: #ccc;
float: left;
height: 20px;
padding-left: 20px;
background: url("./images/bg1.jpg") no-repeat left top;
}
.info .praise {
color: #369;
float: right;
height: 20px;
padding-left: 18px;
background: url("./images/bg2.jpg") no-repeat left top;
}
.praise_2 {
background: url("./images/bg3.jpg") no-repeat left top;
color: #369;
float: right;
height: 20px;
padding-left: 18px;
}
.praises-total {
margin: 0 0 10px 0;
height: 20px;
background: url("./images/praise.png") no-repeat 5px 5px rgb(247, 247, 247);
padding: 5px 0 5px 25px;
line-height: 19px;
}
.comment-box {
padding: 10px 0;
border-top: 1px solid #eee;
}
.comment-box:hover {
background: rgb(247, 247, 247);
}
.comment-box .myhead {
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 15px;
}
.comment-box .comment-content {
float: left;
width: 400px;
}
.comment-box .comment-content .comment-time {
color: #ccc;
margin-top: 3px;
line-height: 16px;
position: relative;
}
.comment-box .comment-content .comment-praise {
display: none;
color: #369;
padding-left: 17px;
height: 20px;
background: url("./images/praise.png") no-repeat;
position: absolute;
bottom: 0px;
right: 44px;
}
.comment-box .comment-content .comment-operate {
display: none;
color: #369;
height: 20px;
position: absolute;
bottom: 0px;
right: 10px;
}
.comment-box .comment-content:hover .comment-praise {
display: inline-block;
}
.comment-box .comment-content:hover .comment-operate {
display: inline-block;
}
.text-box .comment {
border: 1px solid #eee;
display: block;
height: 15px;
width: 428px;
padding: 5px;
resize: none;
color: #ccc
}
.text-box .btn {
font-size: 12px;
font-weight: bold;
float: right;
width: 65px;
height: 25px;
border: 1px solid #0C528D;
color: #fff;
background: #4679AC;
margin-top: 10px;
}
.text-box .btn-off {
border: 1px solid #ccc;
color: #ccc;
background: #F7F7F7;
}
.text-box .word {
float: right;
margin: 7px 10px 0 0;
color: #666;
margin-top: 10px;
}
.text-box-on .comment {
height: 50px;
color: #333;
}
.text-box-on .btn {
display: inline;
}
.text-box-on .word {
display: inline;
}
</style>
</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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(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 () { //给文档内所有btn绑定一个click事件
var val = $(this).prev().val(); //获取元素紧邻的上一个兄弟元素
if (val == "") {
alert("留言内容不能为空！");
} else {
var date = new Date();
var yy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay() +
" " + 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).prev().val("");
$(this).prev().height(20);
$(this).parents(".box").find(".length").text("0");
}
});
$(".comment").click(function () {
$(this).height(80);
});
$(".praise").click(function () { //点赞功能
if ($(this).attr("class") == "praise") {
$(this).attr("class", "praise_2");
} else {
$(this).attr("class", "praise");
}
});
$(document).on("click", ".comment-operate", function () { //删除评论
if (confirm("确认删除吗？")) {
var div = $(this).parents(".comment-box").remove();
}
});
$(document).on("click", ".close", function () { //删除主体内容
if (confirm("确认删除吗？")) {
var div = $(this).parents(".box").remove();
}
});
//$(document)与直接on绑定的区别就是后者只能绑定到文档中本来就具有的，后来添加的就不行 同理不动态绑定也是这样
$(document).on("click", ".comment-praise", function () {
var num = parseInt($(this).attr("total")) + 1;
$(this).attr("total", num);
$(this).html(num + "赞");
});
// $(".comment-praise").on("click",function(){
// var num = parseInt($(this).attr("total"))+1;
// $(this).attr("total",num);
// $(this).html(num+"赞");
// });
// $(".comment-praise").click(function(){
// var num = parseInt($(this).attr("total"))+1;
// $(this).attr("total",num);
// $(this).html(num+"赞");
// });
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
主要应用：
1 on()方法 动态绑定事件{添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）}
2 val() 方法返回或设置被选元素的值
3 parseInt() 函数可解析一个字符串，并返回一个整数
4 trim()方法 删除被选元素中字符串开始和末尾的空格
5 parents() 获得被选元素的所有祖先元素
6 find()方法获得被选元素的所有后代元素
7 prev()方法 获取紧邻的前一个同级元素
8 text()方法 设置或返回被选元素的文本内容（不解析html代码）
9 Date() 获取当前的日期和时间 getFullYear() 获取年 getMonth()获取月 从0开始需要加1 getDate() 获取日 getHours() 获取时 getMinutes()获取分 date.getSeconds()获取秒
10 append()方法 在被选元素内部的结尾插入内容
11 height() 设置或返回所选元素的高度
12 attr()方法 设置或返回被选元素的属性值
13 html()方法 设置或返回被选元素的内容
14 confirm() 弹出一个确定取消按钮 确定返回true 其他返回false
15 remove()方法 删除被选元素及其子元素
注意事项：
1、动态绑定时，通过document绑定和直接绑定on的区别：document绑定可以绑定到文档中本来就有的内容和动态添加的内容，而直接绑定就只能绑定到文档中原来就有的内容