博客列表 >说说输入点赞删除功能——2019年1月23日

说说输入点赞删除功能——2019年1月23日

离歌浅唱醉人心丶的博客
离歌浅唱醉人心丶的博客原创
2019年01月24日 15:28:22785浏览

jQuery实现说说输入点赞删除功能,主要运用jQuery选择器,append(),val(),text(),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.1.1.min.js"></script>
    <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;}
        .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
        .text-box .word{  float: right; margin: 7px 10px 0 0; color: #666;}
        .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;"><b>4</b>个人觉得很赞</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"><b>1</b>赞</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"><b></b>赞</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>
    $(function () {
        // on() 事件绑定
        $('.comment').on('keyup',function () {
            let len = $(this).val().length;//内容字符长度
            $(this).parent('.text-box').find('.length').text(140-len);
        });
        // 文档中所有的 .btn 绑定事件
        $(document).on('click','.btn',function () {
            let val = $(this).prev().val(); //获取评论内容
            if (val === ''){
                alert('留言内容不能为空!');
            } else {
                let date = new Date();
                let time = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'  '+date.getHours()+":"+date.getMinutes()+':'+date.getSeconds();
                let 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">'+time+
                    '<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').val('0'); //清空数量



                //输入完成时 文本框恢复高度
                $(this).prev().height(20);
            }
        });
        //输入评论内容 文本框高度增加
        $('.comment').click(function () {
            $(this).height(80);
        });
        // 评论删除
        $('#list').on('click','.comment-operate',function () {
                if (confirm('确认删除吗?')){
                    $(this).parents('.comment-box').remove(); //删除 comment-box
                }else {
                    return false;
                }
        });
        //说说删除
        $('.close').on('click',function () {
            if (confirm('确认删除吗?')){
                $(this).parents('.box').remove(); //删除 box
            }else {
                return false;
            }
        });
        //说说点赞和取消功能
        $('.praise').on('click',function () {
            //获取点赞数量
            let num = $('.praises-total').children('b').text();
            if ($(this).hasClass('clicked')){   //如果点击过了就取消
                num--;
                $('.praises-total').children('b').text(num);
                $(this).text('赞');
                $(this).attr('class','praise');
            } else {  //否则就自增1
                num++;
                $('.praises-total').children('b').text(num);
                $(this).text('取消');
                $(this).attr('class','praise_2'); //替换点赞样式
                $(this).addClass('clicked'); //添加新的class样式
            }
        });
        // 评论点赞
        $('#list').one('click','.comment-praise',function (){
            //获取点赞数量
            let num = parseInt($('.comment-praise').children('b').text());
            let praise = $('.comment-praise');
            num++; //点赞数量加一
            praise.html('<b>'+num+'</b>'+'赞'); //点赞数量写入
        });
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议