1. <div class="productDiscuss">
  2.             <div class="title"><span class="pl_title">评论</span></div>
  3.             <div class="contBox">
  4.                 <div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>
  5.                 <div class="fl right">
  6.                     <div class="discussArea">
  7.                         <textarea class="textarea" id="content" placeholder="小李子，说点什么吧~~"></textarea>
  8.                     </div>
  9.                     <div class="otherInfo">
  10.                         <span class="fl btn updateImg">选择图片</span>
  11.                         <input type="file" class="imgFile" id="updateImg" multiple />
  12.                         <span class="fr btn submitBtn" id="submitBtn">发布</span>
  13.                         <span class="fr red Tip" style="display:none;" id="submitBtnTip">请输入内容</span>
  14.                     </div>
  15.                     <div class="showPic">
  16.  
  17.                     </div>
  18.                 </div>
  19.             </div>
  20.             <div class="discussList">
  21.                 <ul>
  22.                 </ul>
  23.             </div>
  24.         </div>
  1. /*评论*/
  2. .productDiscuss{ margin:6px 0 0;}
  3. .productDiscuss .otherInfo{ position:relative; overflow:hidden;}
  4. .productDiscuss .title{ margin-bottom:54px; text-align:center; border-bottom:1px solid #b2b2b2;}
  5. .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;}
  6. .productDiscuss .gray{ padding-left:10px; color:#999;}
  7. .productDiscuss .red{ color:#ee1212; cursor:pointer;}
  8. .productDiscuss .Tip{ line-height:36px; cursor:default; padding-right:10px; font-size:12px;}
  9. .productDiscuss .right{ width:625px;}
  10. .productDiscuss .discussList .right{ width:680px; }
  11. .productDiscuss .btn{ display:inline-block; padding:0 15px; height:34px; line-height:34px; border-radius:5px;  cursor:pointer;}
  12. .productDiscuss .updateImg{ background:#bbc0c3;  border:1px solid #959595; color:#fff; }
  13. .productDiscuss .submitBtn,.productDiscuss .submitBtn2,.productDiscuss .submitBtn3{ padding:0 30px;  background:#2399dc; color:#fff;  border:1px solid #2399dc;}
  14. .discussList,.contBox{  overflow:hidden;}
  15. .contBox{ margin-bottom:23px; padding:20px 20px 30px; border:1px solid #959595; border-radius:10px; background:#eff5f8;}
  16. .discussList li{ margin-bottom:15px; padding:0 0 20px; border-bottom:1px solid #b2b2b2; overflow:hidden;}
  17. .discussList li:last-child{ border-bottom:none;}
  18. .productDiscuss .picDefault{ padding:0 20px 0 0; width:50px; height:50px; }
  19. .productDiscuss .picDefault img{ width:100%; border-radius:50%; }
  20. .productDiscuss .textarea{ float:left; padding:7px 0 0 7px; width:615px; height:70px; line-height:24px; border-radius:10px; }
  21. .productDiscuss .discussList .textarea{ width:670px; }
  22. .productDiscuss .discussArea{ overflow:hidden; padding-bottom:10px; }
  23. .discussList .info{ font-size:12px; color:#999; }
  24. .discussList .addDiscuss{}
  25. .discussList .otherLY{ overflow:hidden; padding-top:10px;}
  26. .discussList .content{ padding:5px 0; line-height:18px;}
  27. .discussList h5{ font-size:14px;}
  28. .discussList .house{ overflow:hidden; width:660px; margin-top:10px; padding:5px 10px; background:#eee;}
  29. .discussList .house dd{ overflow:hidden; padding:5px 0;}
  30. .discussList .parag{ padding-right:10px; width:590px; color:#333;}
  31. .discussList .huifu{ color:#ee1212; cursor:pointer;}
  32. .discussList .deletedDiscuss,.discussList .deletedDiscuss2{ margin-right:10px;}
  33. .imgFile{ display:inline-block; position:absolute; left:; top:;  width:88px; height:36px; filter: alpha(opacity = 0);-moz-opacity:;-khtml-opacity:;opacity:;}
  34. .productDiscuss  .showPic{ margin-top:7px;}
  35. .productDiscuss .showPl img{ margin-right:10px;}
  1. //上传图片
  2.         $('#updateImg').change(function(){
  3.             if (!this.files) {
  4.                 alert('当前浏览器不支持图片上传，请改用chrome或IE9以上等最新浏览器。');
  5.                 return false;
  6.                  }
  7.             var len_files = this.files.length,
  8.                   len_li = $('.showPic span').size();
  9.             if(len_files > 5 || len_files + len_li >5){
  10.                 alert('最多上传5张照片');
  11.                 return false;
  12.                }
  13.             for(var i=0; i<len_files; i++){
  14.                 var reader = new FileReader();
  15.                 reader.onload = function(e) {
  16.                     var base64 = e.target.result,
  17.                           img = '<span class="perBase" style="position:relative; display:inline-block; padding:8px 8px 0 0;">'+
  18.                                         '<img src="'+base64+'" style="width:56px; height:56px;" class="pic"/>'+
  19.                                         '<img src="${pageContext.request.contextPath}/resources/images/close_icon.png" class="deleted" style="display:none; position:absolute; top:0px; right:0px; cursor:pointer; "/>'+
  20.                                     '</span>';
  21.                     $('.showPic').append(img);
  22.                     arr_base64.push(base64);
  23.                    }
  24.                 reader.readAsDataURL(this.files[i]);
  25.             }
  26.         })
  27.  
  28.         //删除图片
  29.         $('.showPic .deleted').live('click',function(){
  30.             var that = $(this);
  31.             var index = that.parent().index();
  32.             arr_base64.splice(index,1);  //删除
  33.             that.parent().remove();
  34.             $('#updateImg').val('') //清空filelist对象
  35.         })
  36.         //删除按钮
  37.         $('.perBase').live('mouseover',function(){
  38.             var pic = $(this).find('.pic');
  39.             if(!pic.hasClass('current')){
  40.                 pic.addClass('current');
  41.             }
  42.             pic.next().show();
  43.         })
  44.         $('.perBase').live('mouseleave',function(){
  45.             var pic = $(this).find('.pic');
  46.                pic.next().hide();
  47.         })
  48.  
  49.         //发布带图片的评论
  50.         $('#submitBtn').click(function(){
  51.             var content = $('#content').val(),
  52.                   len_bases = arr_base64.length,
  53.                   img='';
  54.             for(var i=0; i<len_bases; i++){
  55.                  img += '<img src="'+arr_base64[i]+'" style="width:70px; height:60px;" />';
  56.             }
  57.             var html = '<li>'+
  58.                                 '<div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>'+
  59.                                 '<div class="fl right">'+
  60.                                         '<h5><a href="#">小李子</a></h5>'+
  61.                                         '<div class="content">'+content+'</div>'+
  62.                                         '<div class="showPl">'+img+'</div>'+
  63.                                         '<div class="info">'+
  64.                                             '<span>1小时前</span>'+
  65.                                             '<span class="fr red addDiscuss">评论(0)</span><span class="fr red deletedDiscuss">删除</span>'+
  66.                                             '<div class="otherLY" style="display:none;">'+
  67.                                                 '<div class="discussArea"><textarea class="textarea" placeholder="小李子，说点什么吧~~"></textarea></div>'+
  68.                                                 '<div style="overflow:hidden;" class="my_din"><span class="fr btn submitBtn2">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span></div>'+
  69.                                             '</div>'+
  70.                                             '<div class="house" style="display:none;">'+
  71.                                                 '<dl>'+
  72.                                                 '</dl>'+
  73.                                             '</div>'+
  74.                                         '</div>'+
  75.                                 '</div>'+
  76.                             '</li>';
  77.  
  78.             if(content == ''){
  79.                 $('#submitBtnTip').show()
  80.                 return false;
  81.             }
  82.             $('#submitBtnTip').hide();
  83.             $('.discussList ul').prepend(html);
  84.             //-----------------------------------------------这里调接口-------------------------------------------------
  85.             $.ajax({
  86.  
  87.             })
  88.  
  89.             arr_base64 = [];           //清空图片数组
  90.             $('.showPic').empty();
  91.             $('#updateImg').val('') //清空filelist对象
  92.         })
  93.  
  94.         //一级评论展开隐藏按钮
  95.            $('.addDiscuss').live('click',function(){
  96.                $(this).nextAll('.otherLY').toggle();
  97.            })
  98.  
  99.            //回复一级评论
  100.            $('.submitBtn2').live('click',function(){
  101.                var content = $(this).parents('.my_din').siblings('.discussArea').find('.textarea').val();
  102.                var html =
  103.                         '<dd>'+
  104.                             '<div class="fl parag"><a href="#">小王子</a>：'+content+'<span class="gray">4天前</span></div>'+
  105.                             '<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl huifu">回复</span>'+
  106.                         '</dd>';                    
  107.  
  108.                 if(content == ''){
  109.                     $(this).nextAll('.Tip').show();
  110.                     return false;
  111.                 }
  112.                 $(this).parents('.otherLY').nextAll('.house').show().find('dl').prepend(html);
  113.                 $(this).nextAll('.Tip').hide();
  114.                 //-----------------------------------------------这里调接口-------------------------------------------------
  115.                 $.ajax({
  116.  
  117.                 })
  118.            })
  119.  
  120.            //回复展开隐藏
  121.            $(".huifu").live('click',function(){
  122.                var list =
  123.                    '<div class="otherLY otherLy2" style="width:640px;">'+
  124.                     '<div class="discussArea"><textarea class="textarea" style=" width:630px;" placeholder="小李子，说点什么吧~~"></textarea></div>'+
  125.                     '<span class="fr btn submitBtn3">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span>'+
  126.                 '</div>';            
  127.  
  128.                 if(!$(this).hasClass('current')){
  129.                     $(this).addClass('current');
  130.                     $(this).after(list);
  131.                 }else{
  132.                     $(this).removeClass('current');
  133.                     $(this).nextAll('.otherLy2').remove();
  134.                 }
  135.            })
  136.  
  137.            //回复二级和三级评论
  138.            $('.submitBtn3').live('click',function(){
  139.                var content = $(this).siblings('.discussArea').find('.textarea').val();
  140.                var html =
  141.                 '<dd>'+
  142.                     '<div class="fl parag"><a href="#">小海子</a>回复了<a href="#">小王子</a>：'+content+'<span class="gray">4天前</span></div>'+
  143.                     '<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl red huifu">回复</span>'+
  144.                 '</dd>';
  145.  
  146.                if(content== ''){
  147.                 $(this).next('.Tip').show();
  148.                 return false;
  149.             }
  150.                $(this).nextAll('.Tip').hide();
  151.             $(this).parents('dd').after(html);
  152.             $(this).parents().prevAll('.huifu').removeClass('current');
  153.             $(this).parents('.otherLy2').remove();
  154.             //-----------------------------------------------这里调接口-------------------------------------------------
  155.             $.ajax({
  156.  
  157.             })
  158.            })           
  159.  
  160.            //删除一级评论
  161.            $('.deletedDiscuss').live('click',function(){
  162.                $(this).parents('li').remove();
  163.                //-----------------------------------------------这里调接口-------------------------------------------------
  164.             $.ajax({
  165.  
  166.             })
  167.            })
  168.            //删除二级和三级评论
  169.            $('.deletedDiscuss2').live('click',function(){
  170.                var len = $(this).parents('.house').find('dd').size() - 1;
  171.                if(len == 0){
  172.                    $(this).parents('.house').hide();
  173.                }
  174.                $(this).parent().remove();
  175.                //-----------------------------------------------这里调接口-------------------------------------------------
  176.             $.ajax({
  177.  
  178.             })
  179.            })

一个基本jquery的评论留言模块的更多相关文章

  1. NetCloud——一个网易云音乐评论抓取和分析的Python库

    在17的四月份,我曾经写了一篇关于网易云音乐爬虫的文章,还写了一篇关于评论数据可视化的文章.在这大半年的时间里,有时会有一些朋友给我发私信询问一些关于代码方面的问题.所以我最近抽空干脆将原来的代码整理 ...

  2. SeaJS：一个适用于 Web 浏览器端的模块加载器

    什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...

  3. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  4. 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）

    整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  6. 写一个适应所有环境的js模块

    说下背景: 在ES6以前,JS语言没有模块化,如何让JS不止运行在浏览器,且能更有效的管理代码, 于是应运而生CommonJS这种规范,定义了三个全局变量: require,exports,modul ...

  7. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  8. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

  9. jquery星级评论打分组件

    <!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...

随机推荐

  1. android的ListView做表格添加圆角边框

    边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" enc ...

  2. 细说Java多线程之内存可见性

    编程这些实践的知识技能,每一次学习使用可能都会有新的认识 一.细说Java多线程之内存可见性(数据挣用)         1.共享变量在线程间的可见性                共享变量:如果一个 ...

  3. VC depends使用说明

    Depends用来显示与一个可执行文件(exe或者dll)相关的依赖项(动态链接库dll),以及该exe或dll引用了这些dll中的哪些接口,同时也可以看到每个被依赖的dll中的所有导出的函数接口. ...

  4. Tips: compilation and creating new projects on Android 4.0

    If you have downloaded android 4.0, you should read the article. $ANDROID_ROOT/tools/android.bat is ...

  5. Linux 学习笔记 基本的bash shell命令

    Linux 文件系统 Linux讲文件存储在单个目录结构(虚拟目录)中,虚拟目录包含了安装在PC上的所有存储设备的文件路径. Linux虚拟目录中比较复杂的部分是它如何来协调管理各个存储设备.Linu ...

  6. VB.net 利用SerialPort进行读取串口操作

    Imports SystemImports System.IO.Ports Public Class Form1 Private Sub Form1_Load(ByVal sender As Syst ...

  7. Java基础知识强化之网络编程笔记21：Android网络通信之 Android常用OAuth登录（获取令牌信息）

    1. 首先我们去下载开发相关SDK(Android): 下载百度使用OAuth的SDK(Android),如下: 下载链接为:http://developer.baidu.com/wiki/index ...

  8. Android_ViewFlipper

    xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  9. JavaScript总结3—对象

    对象是JavaScript的基本类型,他可以从一个称为原型的对象继承属性,这种原型式继承是JavaScript的核心特征.对对象比较常见的操作有:创建,设置,查找,删除,检测和枚举他的属性.每个对象都 ...

  10. 简单理解前端web开发的MVC模式

    随着前端Ajax兴起.前端开发工作进一步划分:js开发和ui页面制作.另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目. 例如 需要给一个页面上的button ...