一个基本jquery的评论留言模块

<div class="productDiscuss">
            <div class="title"><span class="pl_title">评论</span></div>
            <div class="contBox">
                <div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>
                <div class="fl right">
                    <div class="discussArea">
                        <textarea class="textarea" id="content" placeholder="小李子，说点什么吧~~"></textarea>
                    </div>
                    <div class="otherInfo">
                        <span class="fl btn updateImg">选择图片</span>
                        <input type="file" class="imgFile" id="updateImg" multiple />
                        <span class="fr btn submitBtn" id="submitBtn">发布</span>
                        <span class="fr red Tip" style="display:none;" id="submitBtnTip">请输入内容</span>
                    </div>
                    <div class="showPic">
                            
                    </div>
                </div>
            </div>            
            <div class="discussList">
                <ul>                
                </ul>
            </div>
        </div>

/*评论*/
.productDiscuss{ margin:6px 0 0;}
.productDiscuss .otherInfo{ position:relative; overflow:hidden;}
.productDiscuss .title{ margin-bottom:54px; text-align:center; border-bottom:1px solid #b2b2b2;}
.productDiscuss .pl_title{ position:relative; top:24px; display:inline-block; padding:0 30px; height:48px; line-height:48px; border:1px solid #b2b2b2; color:#2399dc; font-size:30px; background:#fff;}
.productDiscuss .gray{ padding-left:10px; color:#999;}
.productDiscuss .red{ color:#ee1212; cursor:pointer;}
.productDiscuss .Tip{ line-height:36px; cursor:default; padding-right:10px; font-size:12px;}
.productDiscuss .right{ width:625px;}
.productDiscuss .discussList .right{ width:680px; }
.productDiscuss .btn{ display:inline-block; padding:0 15px; height:34px; line-height:34px; border-radius:5px;  cursor:pointer;}
.productDiscuss .updateImg{ background:#bbc0c3;  border:1px solid #959595; color:#fff; }
.productDiscuss .submitBtn,.productDiscuss .submitBtn2,.productDiscuss .submitBtn3{ padding:0 30px;  background:#2399dc; color:#fff;  border:1px solid #2399dc;}
.discussList,.contBox{  overflow:hidden;}
.contBox{ margin-bottom:23px; padding:20px 20px 30px; border:1px solid #959595; border-radius:10px; background:#eff5f8;}
.discussList li{ margin-bottom:15px; padding:0 0 20px; border-bottom:1px solid #b2b2b2; overflow:hidden;}
.discussList li:last-child{ border-bottom:none;}
.productDiscuss .picDefault{ padding:0 20px 0 0; width:50px; height:50px; }
.productDiscuss .picDefault img{ width:100%; border-radius:50%; }
.productDiscuss .textarea{ float:left; padding:7px 0 0 7px; width:615px; height:70px; line-height:24px; border-radius:10px; }
.productDiscuss .discussList .textarea{ width:670px; }
.productDiscuss .discussArea{ overflow:hidden; padding-bottom:10px; }
.discussList .info{ font-size:12px; color:#999; }
.discussList .addDiscuss{}
.discussList .otherLY{ overflow:hidden; padding-top:10px;}
.discussList .content{ padding:5px 0; line-height:18px;}
.discussList h5{ font-size:14px;}
.discussList .house{ overflow:hidden; width:660px; margin-top:10px; padding:5px 10px; background:#eee;}
.discussList .house dd{ overflow:hidden; padding:5px 0;}
.discussList .parag{ padding-right:10px; width:590px; color:#333;}
.discussList .huifu{ color:#ee1212; cursor:pointer;}
.discussList .deletedDiscuss,.discussList .deletedDiscuss2{ margin-right:10px;}
.imgFile{ display:inline-block; position:absolute; left:0; top:0;  width:88px; height:36px; filter: alpha(opacity = 0);-moz-opacity: 0;-khtml-opacity: 0;opacity: 0;}
.productDiscuss  .showPic{ margin-top:7px;}
.productDiscuss .showPl img{ margin-right:10px;}

//上传图片
        $('#updateImg').change(function(){
            if (!this.files) {
                alert('当前浏览器不支持图片上传，请改用chrome或IE9以上等最新浏览器。');
                return false;
                 }   
            var len_files = this.files.length,
                  len_li = $('.showPic span').size();
            if(len_files > 5 || len_files + len_li >5){ 
                alert('最多上传5张照片');
                return false;
               }
            for(var i=0; i<len_files; i++){
                var reader = new FileReader();
                reader.onload = function(e) {
                    var base64 = e.target.result,
                          img = '<span class="perBase" style="position:relative; display:inline-block; padding:8px 8px 0 0;">'+
                                        '<img src="'+base64+'" style="width:56px; height:56px;" class="pic"/>'+
                                        '<img src="${pageContext.request.contextPath}/resources/images/close_icon.png" class="deleted" style="display:none; position:absolute; top:0px; right:0px; cursor:pointer; "/>'+
                                    '</span>';
                    $('.showPic').append(img);
                    arr_base64.push(base64);    
                   }
                reader.readAsDataURL(this.files[i]);      
            }                    
        })
        
        //删除图片
        $('.showPic .deleted').live('click',function(){
            var that = $(this);
            var index = that.parent().index();
            arr_base64.splice(index,1);  //删除
            that.parent().remove();
            $('#updateImg').val('') //清空filelist对象
        })   
        //删除按钮
        $('.perBase').live('mouseover',function(){
            var pic = $(this).find('.pic');
            if(!pic.hasClass('current')){
                pic.addClass('current');
            }            
            pic.next().show();
        })        
        $('.perBase').live('mouseleave',function(){
            var pic = $(this).find('.pic');
               pic.next().hide();            
        })
        
        //发布带图片的评论
        $('#submitBtn').click(function(){  
            var content = $('#content').val(),
                  len_bases = arr_base64.length,
                  img='';
            for(var i=0; i<len_bases; i++){
                 img += '<img src="'+arr_base64[i]+'" style="width:70px; height:60px;" />';                
            }            
            var html = '<li>'+
                                '<div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>'+
                                '<div class="fl right">'+
                                        '<h5><a href="#">小李子</a></h5>'+
                                        '<div class="content">'+content+'</div>'+
                                        '<div class="showPl">'+img+'</div>'+
                                        '<div class="info">'+
                                            '<span>1小时前</span>'+
                                            '<span class="fr red addDiscuss">评论(0)</span><span class="fr red deletedDiscuss">删除</span>'+
                                            '<div class="otherLY" style="display:none;">'+
                                                '<div class="discussArea"><textarea class="textarea" placeholder="小李子，说点什么吧~~"></textarea></div>'+
                                                '<div style="overflow:hidden;" class="my_din"><span class="fr btn submitBtn2">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span></div>'+
                                            '</div>'+
                                            '<div class="house" style="display:none;">'+
                                                '<dl>'+
                                                '</dl>'+
                                            '</div>'+
                                        '</div>'+
                                '</div>'+
                            '</li>';
            
            if(content == ''){
                $('#submitBtnTip').show()
                return false;
            }
            $('#submitBtnTip').hide();
            $('.discussList ul').prepend(html);           
            //-----------------------------------------------这里调接口-------------------------------------------------    
            $.ajax({
                
            })
            
            arr_base64 = [];           //清空图片数组
            $('.showPic').empty();      
            $('#updateImg').val('') //清空filelist对象     
        })
        
        //一级评论展开隐藏按钮
           $('.addDiscuss').live('click',function(){
               $(this).nextAll('.otherLY').toggle();               
           })
           
           //回复一级评论
           $('.submitBtn2').live('click',function(){
               var content = $(this).parents('.my_din').siblings('.discussArea').find('.textarea').val();
               var html = 
                        '<dd>'+                                           
                            '<div class="fl parag"><a href="#">小王子</a>：'+content+'<span class="gray">4天前</span></div>'+
                            '<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl huifu">回复</span>'+                            
                        '</dd>';                    
                
                if(content == ''){
                    $(this).nextAll('.Tip').show();
                    return false;
                }    
                $(this).parents('.otherLY').nextAll('.house').show().find('dl').prepend(html);
                $(this).nextAll('.Tip').hide();
                //-----------------------------------------------这里调接口-------------------------------------------------
                $.ajax({
                    
                })
           })
           
           //回复展开隐藏
           $(".huifu").live('click',function(){           
               var list = 
                   '<div class="otherLY otherLy2" style="width:640px;">'+
                    '<div class="discussArea"><textarea class="textarea" style=" width:630px;" placeholder="小李子，说点什么吧~~"></textarea></div>'+
                    '<span class="fr btn submitBtn3">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span>'+
                '</div>';            
               
                if(!$(this).hasClass('current')){
                    $(this).addClass('current');
                    $(this).after(list);    
                }else{
                    $(this).removeClass('current');
                    $(this).nextAll('.otherLy2').remove();
                }                                
           })
           
           //回复二级和三级评论
           $('.submitBtn3').live('click',function(){               
               var content = $(this).siblings('.discussArea').find('.textarea').val();
               var html = 
                '<dd>'+                                           
                    '<div class="fl parag"><a href="#">小海子</a>回复了<a href="#">小王子</a>：'+content+'<span class="gray">4天前</span></div>'+
                    '<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl red huifu">回复</span>'+
                '</dd>';
                
               if(content== ''){
                $(this).next('.Tip').show();
                return false;
            }
               $(this).nextAll('.Tip').hide();            
            $(this).parents('dd').after(html);
            $(this).parents().prevAll('.huifu').removeClass('current');
            $(this).parents('.otherLy2').remove();
            //-----------------------------------------------这里调接口-------------------------------------------------
            $.ajax({
                
            })
           })           
           
           //删除一级评论
           $('.deletedDiscuss').live('click',function(){
               $(this).parents('li').remove();
               //-----------------------------------------------这里调接口-------------------------------------------------    
            $.ajax({
                
            })
           })
           //删除二级和三级评论
           $('.deletedDiscuss2').live('click',function(){               
               var len = $(this).parents('.house').find('dd').size() - 1;
               if(len == 0){                   
                   $(this).parents('.house').hide();
               }
               $(this).parent().remove();
               //-----------------------------------------------这里调接口-------------------------------------------------        
            $.ajax({
                
            })
           })

 

转载于:https://www.cnblogs.com/zhangxusong/p/5221092.html