我在做评论功能时学到的js一些思路

• 在提交评论的时候，如何判断是一级评论还是二级评论（因为都是通过一个文本域提交评论），思路：声明一个全局变量，如果是回复（二级评论）那么会触发点击回复事件，在这个事件的回调函数里给全局变量设置为true；如果没有设为true，则说明是提交一级评论。如何声明全局变量--》here
• 因为是通过一个按钮的点击事件实现回复和一级评论，所以需要用到一个事件触发多个函数的思路。看了一眼这篇博客有了一个思路~呵呵~通过全局变量的值来调用不同的函数。
• 复制引用：只说如何获取到当前页面的url。使用PHP获取的。

  <input type="text" class="trackback-url" value="{{'http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI']}}" />
         <button type="submit" class="quick-copy-btn">复制引用</button>

• button的默认行为：https://www.cnblogs.com/wisdomoon/p/3330856.html
• 回复的时候，replyname和内容是连在一起的，所以需要截取。但是js中好像没有删除字符串中指定长度的字符串的函数。使用substr从content中截取出replyname，但是content内容是不变的，所以还要把content中的replyname删除，才是真正的内容。具体做法如下：（len是全局变量，这里值截取部分代码，不完整）

  var content = $('#comment').val(); //评论内容,需要处理，把replyname去掉
      //截取content，已经获取到replyname的长度，直接把他截取掉即可"@+replyname",并且还可以通过截取获得replyname的值，不然没办法获取
      var replyname = content.substr(0,len+1).substr(1); //len+1是因为还有个@
      content = content.substr(len+1); //不需要删除replyname，直接从replyname后开始截取不就OK了
      alert(replyname);alert(content);

• 文章评论的js代码（不包括PHP后台，html）

   <script type="text/javascript">
     var isSubcomment = false; //false 默认是一级评论
     var pid;
     var len;
     //点击一级评论de回复触发此事件函数
     function addcom(obj) {
       //不这样写了，直接把回复的对象填到模板评论框中，就像博客园的回复一样。一级评论和回复都用同一个文本域。
       var replyname = $(obj).parent().prev().text();
       //在这里获取replyname的长度，因为在其他地方获取不到replyname的值,也就更不能获取长度了
       len = replyname.length;
       $('#comment').val('@'+replyname+'\n');
       //滚动到评论文本域位置
       scrollTo('#comment',300);
       isSubcomment = true; //true 表示提交二级评论
       pid = $(obj).siblings('.parent_id').text();
     }
  
     //点击二级评论的回复触发此事件函数
     function addsubcom(obj) {
       var replyname = $(obj).parent().siblings('#nickname').text();
       len = replyname.length;
       $('#comment').val('@'+replyname+'\n');
       scrollTo('#comment',300);
       isSubcomment = true; //true 表示提交二级评论
       pid = $(obj).siblings('.parent_id_2').text();
     }
  
     /*不能在addcom函数里触发.btn-submit点击事件，应该是交给.btn-submit事件回调函数自己判断触发那个函数。这样就不会和addcom
     * 耦合，否则在addcom函数里触发此事件耦合度太高。最主要的是在addcom里触发事件实现不了想要的功能。。。
     * 点击提交评论按钮的时候，需要判断提交的是一级评论还是二级评论。通过全局变量来判断。
     * 行内事件和其他类型绑定事件不能共存？
     */
     function submitbtn() {
       if(isSubcomment === true){
         //提交二级评论
         sentsubcomment();
       }else{
         sentcomment();
       }
  
     }
  
     //获取评论文本域提交按钮元素，调用此函数发送ajax
     function sentsubcomment() {
       // alert('提交二级评论');
       var content = $('#comment').val(); //评论内容,需要处理，把replyname去掉
       //截取content，已经获取到replyname的长度，直接把他截取掉即可"@+replyname",并且还可以通过截取获得replyname的值，不然没办法获取
       var replyname = content.substr(0,len+1).substr(1); //+1是因为还有个@
       content = content.substr(len+1); //不需要删除replyname，直接从replyname后开始截取不就OK了
       var parent_id = pid;//需要动态获取,获取parent_id=0的评论的id作为回复的parent_id
       var nickname = $('#username').text();//昵称即登录的用户名,本来想做为全局变量获取一次，但是声明为全局变量就是undefined，wtf?
       var head_pic = $('.photo').attr('src');//登录用户的头像
       var post_id = $('#comment_post_ID').val();
       $.ajax({
         type: 'post',
         url: '/comment',
         data: {content:content, parent_id:parent_id, nickname:nickname, head_pic:head_pic, post_id:post_id, replyname:replyname},
         headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         },
         success: function(data) {
           if(data.status){
             location.reload();
           }else{
             alert('评论失败，请重试');
           }
         },
         error: function() {
           alert('未知错误，请重新发送');
         },
       })
     }
  
     //当发表评论的时候，是需要直接触发.btn-submit按钮事件的。所以这里就有分支。
     //1.通过事件执行顺序来判断是一级评论还是二级评论  2. 通过文本域中是否有replyname判断是一级评论还是二级评论
     function sentcomment() {
       // alert('提交一级评论');
       var content = $('#comment').val(); //评论内容
       var parent_id = 0;//需要动态获取
       var nickname = $('#username').text();//昵称即登录的用户名,本来想做为全局变量获取一次，但是声明为全局变量就是undefined，wtf?
       var head_pic = $('.photo').attr('src');//登录用户的头像
       var post_id = $('#comment_post_ID').val();
       $.ajax({
         type: 'post',
         url: '/comment',
         data: {content:content, parent_id:parent_id, nickname:nickname, head_pic:head_pic, post_id:post_id},
         headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         },
         success: function(data) {
           if(data.status){
             location.reload();
           }else{
             alert('评论失败，请重试');
           }
         },
         error: function() {
           alert('未知错误，请重新发送');
         },
       })
  
     }
  
     //滚动到指定位置
     function scrollTo(element,speed) {
       if(!speed){
         speed = 300;
       }
       if(!element){
         $("html,body").animate({scrollTop:0},speed);
       }else{
         if(element.length>0){
           $("html,body").animate({scrollTop:$(element).offset().top-200},speed);
         }
       }
     }
  
     //一级评论移入显示回复按钮
     function addreply(obj) {
       // $(obj).append('<a href="javascript:;"> 回复# </a>'); //这种抓取不到回复文本，无法实现点击事件
       //想到了，我不用append动态添加“回复”，我用样式控制显示和隐藏
       $(obj).find('a').css('display','inline-block');
  
     }
  
     //一级评论移出隐藏回复按钮
     function removereply(obj) {
       // $(obj).find('a').remove();
       $(obj).find('a').css('display','none');
     }
  
     //二级评论移入显示回复按钮（所有一级评论之外的回复我都统称二级评论）
     function addsubreply(obj) {
       // alert(2);
       // $(obj).append('<a href="javascript:;">回复#</a>');
       // $(this).off('click');
       $(obj).find('a').css('display','inline-block');
     }
  
     //二级评论移出隐藏回复按钮
     function removesubreply(obj) {
       // $(obj).find('a').remove();
       $(obj).find('a').css('display','none');
     }
  
   </script>