简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 完善评论框扩点赞
Blogger Information
Blog 21
fans 0
comment 0
visits 19959
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
完善评论框扩点赞
电动机的博客
Original
726 people have browsed it


操作属性:
 
    attr() 方法设置或返回被选元素的属性值;
    console.log($('img').attr('width'))
    $('span').attr('class','box')
    $('选择器').attr({属性名:值, 属性名:值 ...})
    $('span').attr({'class':'box','id':'text'})
     removeAttr()从被选元素中移除属性; 
    $('span').removeAttr('id','text')
     添加元素:
     元素内部添加：
     append()在被选元素的结尾插入内容;
     $('#box').append('结束了');
     prepend()在被选元素的开头插入内容;
      $('#box').prepend('我是开头');
     元素外部添加：
    after()在被选元素之后插入内容;   
    $('#box').after('我是after的内容');
    before()在被选元素之前插入内容;
     $('#box').before('我是before的内容');
    删除元素:
    remove() 方法删除被选元素及其子元素;
    $('#box').remove()
     empty() 方法删除被选元素的子元素;
     $('#box').empty()

<!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 type="text/javascript" src="static/jquery-3.3.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: 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 type="text/javascript">
    $(function(){
      //on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件 动态绑定
      $('.comment').on('keyup',function(){
        var len=$(this).val().length;
        $(this).parents('.text-box').find('.length').text(140-len);
      })
      //动态生成留言内容 on()方法 $(document).on（）给文档中所有选中的class绑定上事件
      $(document).on('click','.btn',function(){ //点击回复按钮
       //遍历方法 prev()获得元素紧邻前一个同胞元素
        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();
              // console.log(y)
           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').append(html)
           //清空输入框
           $(this).parents('.box').find('.comment').val("")
           //初始化输入字数
           $(this).parents('.box').find('.length').text("0")
           $(this).prev().height(20)

        }

      })
      //动态删除
      // $('.comment-operate').on('click',function(){
      //     if(confirm('确定删除么?')){
      //       $(this).parents('.comment-box').remove();
      //     }
      // })
      $(document).on('click','.comment-operate',function(){
        if(confirm('确定删除么?')){
            $(this).parents('.comment-box').remove();
          }
      })
      //给评论框加高度
         $(document).on('click','.comment',function(){
            $(this).height(80)
      })
    //给评论点赞
      $(document).on('click','.comment-praise',function(){
           var num=parseInt($(this).attr('total'))+1;
           $(this).attr('total',num);
           $(this).html(num+'赞')
      })
   //动态删除
  $(document).on('click','.close',function(){
        if(confirm('确定删除么?')){
            $(this).parents('.box').remove();
          }
      })
//给总的评论点赞
      $(document).on('click','.praise',function(){
          $(this).attr('class','praise_2'); 
           var num=parseInt($('.praises-total').attr('total'))+1;
           $('.praises-total').attr('total',num);
           $('.praises-total').html(num+'个人觉得很赞')
    })

 $(document).on('mouseleave','.praise_2',function(){
          $(this).attr('class','praise'); 
                    
    })

      })
</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！