<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="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="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="640px;">'+ '<div class="discussArea"><textarea class="textarea" style=" 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({ }) })