用 jQuery 实现点击回复之后显示@用户名的效果
今早 koobai 的评论提出“什么时候写一篇点击回复之后会显示@用户名的效果日志”，刚好这两天我正在为“文囧”而“囧”，所以就把这个效果的实现方法写出来，因为我是伟大的 CP 党，所以老鸟请飘菜鸟请参考。
经常来我这的朋友都会发现我的评论回复用的是“@用户”来回复评论的，具体说明我在《启用新 WordPress 主题: zSofa ( Alpha 版本)》这篇文章里面说过，这里就不累说了。
下面只讲“用 jQuery 实现点击回复之后显示@用户名的效果”的方法步骤，同样因为我是 CP 党，所以我尽量做到贴出的代码直接 CP 就能用。
下面是详细步骤：
1. 确定自己的主题评论结构基本是 WordPress 默认的结构（也就是说主题的评论结构比较标准），而且用的是 WordPress 2.7 以上版本的 wp_list_comments 函数，具体可以参考 http://codex.wordpress.org/Template_Tags/wp_list_comments
2. 确定自己已经加载 jQuery 库，如果没有加载，在主题文件 header.php 里面找到下面这个
<?php wp_head(); ?>
在它前面加入以下代码：（注：jquery 1.3.2 一样效果）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/reply.js"></script>
3. 把下面的 jQuery 代码保存为 reply. js 文件，并存到主题所在目录（也可以加在主题本身已有的 js 文件里面）
/* @reply js by zwwooooo */ jQuery(document).ready(function($){ //Begin jQuery $('.reply').click(function() { var atid = '"#' + $(this).parent().attr("id") + '"'; var atname = $(this).prevAll().find('cite:first').text(); $("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus(); }); $('.cancel-comment-reply a').click(function() { //点击取消回复评论清空评论框的内容 $("#comment").attr("value",''); }); }) //End jQuery
4. OK 啦，可以试试了。加些说明：如果你的主题评论结构符合上面第 1 点所说，原则上支持 WordPress 2.7 版本以上的自带评论嵌套
需要了解原理的可以借助 Firebug 和 jQuery 中文手册自个折腾研究。
声明: 本文采用 BY-NC-SA 协议进行授权 | ZWWoOoOo
转载请注明转自《用 jQuery 实现点击回复之后显示@用户名的效果》
Filed under WP Trick, WordPress. Tags: jQuery, Trick, WordPress
沙发，终于沙发！
你这不是一直有这功能么？
@砼砼 有人要+文囧=写出来
这个暂时用不上，以后自己折腾的时候也许需要，先记着。
@Vicia 嘿嘿，我是为了解决文囧才发的，发前就知道需要的人不会有多少
@纯粹 twitter会稍慢，订阅最快，当然不是feedsky的
@zwwooooo twitter上也是FeedBurner直接输出RSS，时间上对比好像差不多是即时的，快慢那么一点吧
@纯粹 应该是
@zwwooooo 订阅也不快的，每次看到订阅再来，沙发早就没了。T_T 最快的是直接访问，哈哈。我今天就是碰上的。
@Vicia Feedburner速度还是很快的，基本是几秒中就更新。
@zwwooooo reader里么？我这儿为啥不行呢？我曾经试过，手动刷新也刷不出来。@_@
@Vicia reader那里不知道啊，不过feedburner是很快的，基本我发布了也就更新了
@Vicia
同上，顺便看看效果
我觉得不用jQuery也可以实现这个效果的，不过不能用嵌套生成的那个回复按钮，我还没有测试过我的想法
@bolo 这个给有加载jQuery的朋友的，呵呵。不用 jQuery 的方法我就不知道，期待你的想法测试
恭喜你终于消灭文囧了
@A.shun 哼哼
过来坐坐~
晕，刚才域名多打了个字母。
@huangjun 我已经帮你纠正
呀，这么快就出来了，太感谢了
~~
晚上折腾下~~
@koobai 嘿嘿
@zwwooooo 我的主题函数貌似用了，后面多了个2，如果把这2去掉就正常了，但去掉之后主题评论样式就丢了~~，这应该咋改下
@zwwooooo wp_list_comments2
@koobai 你看看你的主题是不是自定义了评论样式，去function.php里面看，如果你的主题评论结构改的太大的话就要修改代码中对应的id或者class
@koobai 刚才去你博客看了下你的评论结构，汗，这主题是谁做的？怎么还用table、td、tr……
，而且结构相当复杂化，难怪你用不了。
@zwwooooo 这主题是国外的
~~
@koobai 我去看了，你把主题发到我邮箱吧，我明天有时间帮你看看，邮箱地址你博客有
@zwwooooo 好地，谢了
~~已发到你邮箱，jQuery代码在all.js文件里
@koobai 已经搞定，发到你邮箱了。
@zwwooooo 嗯，已经收到替换上了，非常感觉。不过有点小问题请教下，当评论者评论时没写入网站的时（也就是用户名没链接），回复的时候不是显示@用户名，而是显示@回复~~。可能没表达清楚，如果可以，可以点击我博客上最新日志中的第一条评论看下效果~~谢谢，嘿嘿
@koobai 你试试把 find("a:first") 改为 find("span:first") 看看能否解决
@zwwooooo OK，解决了。再次感谢~~
@koobai 不用客气，举‘鼠’之劳
咦，什么叫CP党啊。
@王盼盼 Copy Paste
先收藏起来，我用的是嵌套，用@reply有必要吗？
不过方法很值得借鉴！
@万戈 我的也是嵌套，不过我的是两层而已，我觉得2层很好，你看你楼上的楼上的嵌套多么漂亮
就像论坛的一个贴。这个只是细节问题，用不用都无所谓 
效果很好，酷！
jQuery很强大，我也正在学
@Timothy 我没有学，一边看手册直接cp，然后test出效果
@zwwooooo
这样很好啊，实践出真知
@Timothy 但这样就是懒得去记东西啦，要用时就要翻手册
强大，不过我用的是嵌套~
@Jutoy 我的也是嵌套啊
我来参考、学习。一时半会还看不懂先备份收藏啦！向自称是CP党的Z大童鞋学习。
文章右上角的“Leave a comment”是用了锚记，还是什么呢？希望Z大撰文赐教！
@mytion 现在用了 jQuery 来实现滚动效果
菜鸟过来看看!
@g 荒淫荒淫
我之前也用这个效果,昨天干掉了,觉得花俏.而且,加载一个js,影响打开速度.
@itlobo 因为我的评论Ajax效果本身就假载了jQuery，所以再加些效果也所谓了
@itlobo
效果如何
第二行应该是
不是zsofa.js吧？
@林晨 对，忘了替换了，粗心了
好。学习了。 拿来试试，不过貌似为了这个就多jQuery，有点划不来阿？
@柳城 这个要看你了，我的评论ajax方式本身就加载了jQuery，所以无所谓。
@成 呃～表情是我修改玩儿
这个问题我也问过，好在还是在这找到了
@fcola 慢慢折腾
什么时候写个沙发，板凳，教程，成叔叔那个跟你楼号代码混合了，就不知道怎么搞了
@洁 成叔叔是谁？我不是写了楼号方法么？至于沙发板凳加个if判断楼号不就可以了？
杯具了，有木有空帮我看看 ~
我用了这个以后，先AJAX发表一次评论 ~
后一次点击回复，就没有出现 @用户名 了 ~
@小邪 喔喔，知道为什么木有@显示了 ~
因为原先的JS是无法处理AJAX返回后的数据的 ~
所以就让返回后的数据里面也带了这样的JS ~
就完工鸟 ~ 嘻嘻 ~
@小邪 哈哈，小邪应该比我懂很多js才对
刚做了主题，参考了你的代码实现的@reply，但是不知道为什么，mail to commentors这个插件再也不会发邮件了，特来请教一下，有办法解决么？谢谢！
@ZH CEXO 看看是否跟其他插件冲突
@zwwooooo 应该不会跟别的插件冲突，因为我以前使用的插件和现在使用的插件没有变化，而以前的@reply是用插件的函数实现的，这次是用js实现的，结果就有问题了
@ZH CEXO 你看我这有问题么？所以问题不在这个代码，应该是其他代码/插件引起的，用排除法测试
偶也弄好了，感谢ZWW大神啊！亲一个
@Mucid 囧，你要是女的还好
为什么我折腾半天还是不显示呢= =
willin的ajax 为什么呢为什么呢为什么呢
还有额 你的只有第二层嵌套缩进是怎么弄的呀
@snowxh 你是说2级以下的嵌套全部放在第二层？如果是的话我用的是QiQiboy的无限嵌套方法，具体去他那里吧