登录  /  注册
博主信息
博文 44
粉丝 0
评论 0
访问量 34187
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JQuery微博输入点赞删除作业-2019年1月23日
的博客
原创
479人浏览过

实例

<!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"><span>1</span>赞</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" ><span></span>赞</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 click',function(){
            var len=$(this).val().length //文本框里面的信息内容字符的长度
            $(this).parents('.text-box').find('.length').text(140-len);
            $(this).height(80);
        })
        $(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()+':'+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"><span></span>赞</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)
           }

        })

        $(".info>.praise").on("click", function () {
            $(this).toggleClass("praise").addClass("praise_2");
        });

        $(document).on("click",".comment-praise",function () {
            $(this).css("display","inline-block");
            let num = $(this).find("span").text();
            num++;
            $(this).find("span").text(num);
        });

        $(document).on("click",".comment-operate", function () {
            if(confirm("是否删除?")){
                $(this).parent().parent().parent().remove();
            }else{
                return false;
            }
            
        });
        
        $(document).on("click",".close", function () {
            if(confirm("是否删除?")){
                $(this).parent().remove();
            }else{
                return false;
            }
            
        });


     })
</script>
</body>
</html>

运行实例 »

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


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学