首页>>表单>>jquery无刷新评论,回复评论 删除 点赞(2017-06-06)

jquery无刷新评论,回复评论 删除 点赞

jquery无刷新评论,回复评论 删除 点赞
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="comment-show-con clearfix">  
  2.               
  3.                 
  4.                 
  5.             <div class="comment-show-con-img pull-left"><img src="../../images/logo.png" alt=""></div>  
  6.             <div class="comment-show-con-list pull-left clearfix">  
  7.                 <div class="pl-text clearfix">  
  8.                     <a href="#" class="comment-size-name">freejs.net : </a>  
  9.                     <span class="my-pl-con">123</span>  
  10.                 </div>  
  11.                 <div class="date-dz">  
  12.                     <span class="date-dz-left pull-left comment-time">2017-06-07 08:43:57</span>  
  13.                     <div class="date-dz-right pull-right comment-pl-block" id="349">  
  14.                         <a href="javascript:;" class="removeBlock" >删除</a>  
  15.                         <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>  
  16.                         <span class="pull-left date-dz-line">|</span>  
  17.                         <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a>  
  18.                     </div>  
  19.                 </div>  
  20.                 <div class="hf-list-con">  
  21.                 <!---->  
  22.                                 <!---->  
  23.                 </div>  
  24.                   
  25.             </div>  
  26.               
  27.         </div>  

 

JavaScript Code
  1. <!--点击评论创建评论条-->  
  2. <script type="text/javascript">  
  3.     $('.commentAll').on('click','.plBtn',function(){  
  4.         var myDate = new Date();  
  5.         //获取当前年  
  6.         var year=myDate.getFullYear();  
  7.         //获取当前月  
  8.         var month=myDate.getMonth()+1;  
  9.         //获取当前日  
  10.         var date=myDate.getDate();  
  11.         var h=myDate.getHours();       //获取当前小时数(0-23)  
  12.         var m=myDate.getMinutes();     //获取当前分钟数(0-59)  
  13.         if(m<10) m = '0' + m;  
  14.         var s=myDate.getSeconds();  
  15.         if(s<10) s = '0' + s;  
  16.         var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;  
  17.         //获取输入内容  
  18.         var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();  
  19.         console.log(oSize);  
  20.         //动态创建评论模块  
  21.           
  22.         var that=$(this);  
  23.         var callback = function(newid){  
  24.             oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="../../images/logo.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">freejs.net : </a> <span class="my-pl-con"> '+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block" id='+newid+'><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复'+newid+'</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';  
  25.             that.parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);  
  26.             that.siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');  
  27.             }  
  28.         if(oSize.replace(/(^s*)|(s*$)/g, "") != ''){  
  29.             var data = 'body=' + oSize;  
  30.             $.ajax({                              
  31.             url: "ok.php",               
  32.             type: "GET",                      
  33.             data: data,                       
  34.             cache: false,                   
  35.             success: function (id) {  
  36.                 var newid=id;  
  37.                   
  38.                 //alert(newid);  
  39.                 callback(newid);//调用回调函数。  
  40.             }  
  41.             });   
  42.               
  43.               
  44.         }  
  45.     });  
  46. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_608.html