jQuery 实现 WordPress @回复 详解

在回复时带有“ @ ”的功能大家应该不陌生了,在微博, BBS 中都可以见到“ @ ”的身影,连腾讯的 Qzone 也加入了“ @回复 ”的功能。的确,“ @回复 ”使到回复的对象更加清晰了,对于多重回复效果更加明显。

 

但是, WordPress 的评论模板中并没有自带这个功能,因此我们需要手动添加进去,其实这个功能在 WordPress 中已经比较流行了,不少主题中都带有这个功能,实现的原理也有多种,而我在本文中介绍的是 jQuery 实现的方法,由于网上流传的文章大多都是直接给出 jQuery 代码,没有详细的解释,而不同的网站 DOM 不一定相同,因此不熟悉 jQuery 的童鞋在使用 jQuery 实现“ @回复 ”时可能会出现各种问题。

 

1.加载 jQuery 库,可以直接用 google 的。

2. jQuery 代码,可以直接放到 js 文件中。

jQuery(document).ready(function($){
$('.comment-reply-link').click(function() {
     //获取回复者的id
     var atid = '"#' + $(this).parent().parent().attr("id") + '"';
     //获取回复者的昵称
    var atname = $(this).parent().find('.comment_author').text();
$("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus();
});
$('#cancel-comment-reply a').click(function() {
$("#comment").attr("value",'');
});
});

 

3.解释 jQuery 代码

在实现“ @回复 ”中,关键是获取所要回复的对象的 id 和昵称,因此定义了两个量 atid , atname ,分别用于保存所要回复的对象的 id 和昵称。当用户用鼠标单击 .comment-reply-link 后jQuery会获取其上两级父元素的 id 属性,保存在量 atid 中,然后在其父元素的子辈元素中寻找 .comment_author ,并获取其内容保存在 atname 中。或许上面的描述较难理解,下面再用图片说明一下!

 

要获取用户 id ,首先需要了解评论部分的 DOM 结构,以 Melody 为例,用 Firebug 查看其一条评论的部分 HTML ,

 

 

看了图相信童鞋们应该大概明白了, .comment-reply-link 的上两级父元素包含回复者的 id ,因此可以在这里获取回复者的id,而在 .comment-reply-link 的同辈元素中包含了用户的昵称,看到这里相信各位童鞋再看看上面的 jQuery 代码应该不难理解了!

 

我们首先应该知道自己的评论模板在哪里有输出回复者的 id ,在哪里有输出回复者的昵称,然后用 jQuery 的选择器即可以获取相关的数据,下面列出一些常用的选择器供大家参考:

.parent() 父元素, .children() 子元素, .prev() 前一个同辈元素, .next() 下一个同辈元素

 

更多的选择器可以参考 w3cschool 的资料

http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

 

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-at-reply-for-wordpress-by-jquery.html

评论列表

  • 评论者头像
    回复

    您好,来请教了,看到这个代码很想用,可是试了几天怎么都不行,请帮助,谢谢。
    我的评论结构上这样的:

    《li id=”comment-11786″ class=”comment even thread-even depth-1″》
    《div class=”comment-body” id=”div-comment-11786″》
    《div class=”comment-author vcard”》
    《cite class=”fn”>DaoFa 《span class=”says”》 :</span》2012年2月3日 at 13:04这里是评论内容。
    《div class=”reply”>
    《a onclick=’return addComment.moveForm(“div-comment-11786”, “11786”, “respond”, “2633”)’ href=”/autolist.html?replytocom=11786#respond” class=”comment-reply-link”>Reply
    </div》</li》

    • 评论者头像
      回复

      @DaoFa 你好,你这段html的标签不配对,这样我无法写出相应的jQuery,要不你把代码发到我的邮箱吧330956999@qq.com

  • 评论者头像
    回复

    我又来参考技术文了~~~~
    :mrgreen: :mrgreen:

    • 评论者头像
      回复

      @Kkstxforkamancarmen 欢淫欢淫 :-| :-|

      • 评论者头像
        回复

        ok, la 4.0.4 est en d??ploiement mais personne ne l’as encore re?§ue, j’arrete pas de &lcq;o; cheakin&nbspu» sur mon nexus s est ?? part « checkin succeded » y’a rien je suis toujours en 2.3.6 x_xdes infos pour la fota?(nexus s sous sfr mais debloqu?? de base)

  • 评论者头像
    回复

    domperidone dosage for kids domperidone clogged breast duct symptoms

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O