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