简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 评论点赞删除作业-2019年4月3号
Blogger Information
Blog 19
fans 0
comment 0
visits 13141
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
评论点赞删除作业-2019年4月3号
倪偌卟離
Original
713 people have browsed it

实例

<!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>
</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: block;">0个人觉得很赞</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 type="text/javascript">
    $(function(){
        // $('.comment').on('keyup',function(){//绑定静态控件(函数中的没有对用JS新产生的元素进行处理的语句)时，与下方格式效果相同
        $('.comment').keyup(function(){
           var len=$(this).val().length;
           $(this).parents('.text-box').find('.length').text(len) 
            })
        $('.comment').on('click',function(){
           // $(this).css({'height':'100px'})//用下方格式也可以 
           $(this).height(100)
            })
        // $('.btn').click(function(){//第一种格式
        // $('.btn').on('click',function(){第二种格式
            //对于本例来说，这上下三种格式都可以使用，但是实战中必须要用第三种格式，因为说说的整个元素也将是用JS生成。
        $(document).on('click','.btn',function(){//（第三种格式）这段语句的含义：在文档中找到包含'.btn'（class="btn"）的元素,并给它s动态绑定一个click事件，当事件触发时执行function函数！
           var val=$(this).prev().val();
        if(val==''){
            alert('对不起,留言不能为空!');
        }else{
           var date=new Date();
           var y=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">'+y+'<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').prepend(html)
           //清空输入框
           $(this).parents('.box').find('.comment').val("")
           //初始化输入字数
           $(this).parents('.box').find('.length').text("0")
           $(this).prev().height(15)
       }
            
        })
        //删除评论
        $(document).on('click','.comment-operate',function(){
        if(confirm('确定删除么?')){
            $(this).parents('.comment-box').remove();
          }
      })
         //评论赞
        $(document).on('click','.comment-praise',function(){  
           var num=parseInt($(this).attr('total'))+1;
           $(this).attr('total',num);
           $(this).html(num+'赞')
        }) 
        //说说赞
        $(document).on('click','.praise',function(){  
           var num=parseInt($(this).parents('.box').find('.praises-total').attr('total'))+1;
           $(this).parents('.box').find('.praises-total').attr('total',num);//这两句语句实则是实现了num的一个累加循环，思路：num先等于total+1，而后将num值赋给total，接下来再进行total+1，再赋值，如此循环！点一次赋值一次！实现了保存num的累加后的值，好思路！
           $(this).parents('.box').find('.praises-total').html(num+'个人觉得很赞')
           // $(this).attr('class','praise_2')//改变class，点赞只能一次
                       $(this).css({
		            'background': 'url(static/images/bg3.jpg) no-repeat left top'
                       })//改变class的一个属性值，点赞的数量可以一直累加
        }) 
        $(document).on('click','.close',function(){
            if(confirm('确定删除么？')){//confirm()是确认对话框，用来删除内容时确认使用
                $(this).parents('.box').remove();
            } 
        })
    })
</script>
</body>
</html>

运行实例 »

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


Correction status：Uncorrected

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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！