- 在提交评论的时候,如何判断是一级评论还是二级评论(因为都是通过一个文本域提交评论),思路:声明一个全局变量,如果是回复(二级评论)那么会触发点击回复事件,在这个事件的回调函数里给全局变量设置为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+'\n'); 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+'\n'); 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>
转载于:https://www.cnblogs.com/bneglect/p/10996907.html