我在做评论功能时学到的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）

  1 <script type="text/javascript">
  2   var isSubcomment = false; //false 默认是一级评论
  3   var pid;
  4   var len;
  5   //点击一级评论de回复触发此事件函数
  6   function addcom(obj) {
  7     //不这样写了，直接把回复的对象填到模板评论框中，就像博客园的回复一样。一级评论和回复都用同一个文本域。
  8     var replyname = $(obj).parent().prev().text();
  9     //在这里获取replyname的长度，因为在其他地方获取不到replyname的值,也就更不能获取长度了
 10     len = replyname.length;
 11     $('#comment').val('@'+replyname+'
');
 12     //滚动到评论文本域位置
 13     scrollTo('#comment',300);
 14     isSubcomment = true; //true 表示提交二级评论
 15     pid = $(obj).siblings('.parent_id').text();
 16   }
 17 
 18   //点击二级评论的回复触发此事件函数
 19   function addsubcom(obj) {
 20     var replyname = $(obj).parent().siblings('#nickname').text();
 21     len = replyname.length;
 22     $('#comment').val('@'+replyname+'
');
 23     scrollTo('#comment',300);
 24     isSubcomment = true; //true 表示提交二级评论
 25     pid = $(obj).siblings('.parent_id_2').text();
 26   }
 27 
 28   /*不能在addcom函数里触发.btn-submit点击事件，应该是交给.btn-submit事件回调函数自己判断触发那个函数。这样就不会和addcom
 29   * 耦合，否则在addcom函数里触发此事件耦合度太高。最主要的是在addcom里触发事件实现不了想要的功能。。。
 30   * 点击提交评论按钮的时候，需要判断提交的是一级评论还是二级评论。通过全局变量来判断。
 31   * 行内事件和其他类型绑定事件不能共存？
 32   */
 33   function submitbtn() {
 34     if(isSubcomment === true){
 35       //提交二级评论
 36       sentsubcomment();
 37     }else{
 38       sentcomment();
 39     }
 40     
 41   }
 42 
 43   //获取评论文本域提交按钮元素，调用此函数发送ajax
 44   function sentsubcomment() {
 45     // alert('提交二级评论');
 46     var content = $('#comment').val(); //评论内容,需要处理，把replyname去掉
 47     //截取content，已经获取到replyname的长度，直接把他截取掉即可"@+replyname",并且还可以通过截取获得replyname的值，不然没办法获取
 48     var replyname = content.substr(0,len+1).substr(1); //+1是因为还有个@
 49     content = content.substr(len+1); //不需要删除replyname，直接从replyname后开始截取不就OK了
 50     var parent_id = pid;//需要动态获取,获取parent_id=0的评论的id作为回复的parent_id
 51     var nickname = $('#username').text();//昵称即登录的用户名,本来想做为全局变量获取一次，但是声明为全局变量就是undefined，wtf?
 52     var head_pic = $('.photo').attr('src');//登录用户的头像
 53     var post_id = $('#comment_post_ID').val();
 54     $.ajax({
 55       type: 'post',
 56       url: '/comment',
 57       data: {content:content, parent_id:parent_id, nickname:nickname, head_pic:head_pic, post_id:post_id, replyname:replyname},
 58       headers: {
 59         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 60       },
 61       success: function(data) {
 62         if(data.status){
 63           location.reload();
 64         }else{
 65           alert('评论失败，请重试');
 66         }
 67       },
 68       error: function() {
 69         alert('未知错误，请重新发送');
 70       },
 71     })
 72   }
 73 
 74   //当发表评论的时候，是需要直接触发.btn-submit按钮事件的。所以这里就有分支。
 75   //1.通过事件执行顺序来判断是一级评论还是二级评论  2. 通过文本域中是否有replyname判断是一级评论还是二级评论
 76   function sentcomment() {
 77     // alert('提交一级评论');
 78     var content = $('#comment').val(); //评论内容
 79     var parent_id = 0;//需要动态获取
 80     var nickname = $('#username').text();//昵称即登录的用户名,本来想做为全局变量获取一次，但是声明为全局变量就是undefined，wtf?
 81     var head_pic = $('.photo').attr('src');//登录用户的头像
 82     var post_id = $('#comment_post_ID').val();
 83     $.ajax({
 84       type: 'post',
 85       url: '/comment',
 86       data: {content:content, parent_id:parent_id, nickname:nickname, head_pic:head_pic, post_id:post_id},
 87       headers: {
 88         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 89       },
 90       success: function(data) {
 91         if(data.status){
 92           location.reload();
 93         }else{
 94           alert('评论失败，请重试');
 95         }
 96       },
 97       error: function() {
 98         alert('未知错误，请重新发送');
 99       },
100     })
101 
102   }
103 
104   //滚动到指定位置
105   function scrollTo(element,speed) {
106     if(!speed){
107       speed = 300;
108     }
109     if(!element){
110       $("html,body").animate({scrollTop:0},speed);
111     }else{
112       if(element.length>0){
113         $("html,body").animate({scrollTop:$(element).offset().top-200},speed);
114       }
115     }
116   }
117 
118   //一级评论移入显示回复按钮
119   function addreply(obj) {
120     // $(obj).append('<a href="javascript:;"> 回复# </a>'); //这种抓取不到回复文本，无法实现点击事件
121     //想到了，我不用append动态添加“回复”，我用样式控制显示和隐藏
122     $(obj).find('a').css('display','inline-block');
123     
124   }
125 
126   //一级评论移出隐藏回复按钮
127   function removereply(obj) {
128     // $(obj).find('a').remove();
129     $(obj).find('a').css('display','none');
130   }
131 
132   //二级评论移入显示回复按钮（所有一级评论之外的回复我都统称二级评论）
133   function addsubreply(obj) {
134     // alert(2);
135     // $(obj).append('<a href="javascript:;">回复#</a>');
136     // $(this).off('click');
137     $(obj).find('a').css('display','inline-block');
138   }
139 
140   //二级评论移出隐藏回复按钮
141   function removesubreply(obj) {
142     // $(obj).find('a').remove();
143     $(obj).find('a').css('display','none');
144   }
145 
146 </script>

View Code