沙丘的技术分享

根据自己的主题，调整jQuery实现回复显示@用户名

jQuery实现@评论回复这篇纯粹是小白文，适合沙丘这种完全不懂代码的看明白为何复制zww等高手的jQuery代码会出错：没有@、没有用户名或者点击取消回复没有自动清空评论框。3三种错误实质都是一个问题——jQuery代码中的对象因主题而不同，所以没有通用版，需要由主题css元素id替换。

寻找自己主题的jQuery代码

以前测试的时候没有使用zww的，使用的是kayosite 的：

jQuery(document).ready(function($){
$(‘.comment-reply-link’).click(function() {
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”,”);
});
});

和zww的代码差不多，测试成功，所以以此为例。
这段代码有3个关键对象id（不知道专业术语是什么）：

  • .comment-reply-link：以此截断获取回复者的id等；
  • .comment_author：获取回复者的用户名；
  • #cancel-comment-reply a：对应取消回复。

是不是挺熟悉的，这3个id和主题css文件的元素id是一样的。所以只需要根据自己的主题查找一下css元素id即可：

  • 回复者id：“回复/reply”的css元素id；
  • 回复者用户名：评论框显示“xxx”名字的css元素id；
  • 取消回复：“取消回复/canel reply”的css元素id。

以这里的主题为例，在Chrome（Firefox也有查看元素）中显示“Reply”在主题CSS中的元素id为“.reply”:

jQuery实现@评论回复

因此将代码中的“.comment-reply-link”替换为“.reply”，其他以此类推。

至此已经偷取了3个jQuery代码了，分别是：回到顶部、鼠标滑过显示回复，@用户名评论回复。虽然完全不懂代码，但是折腾出来一点——jQuery代码就是靠自己查找主题中对应的css元素id替换通用的jQuery代码。

沙丘