最近在新写的主题 acgzone 中自定义了评论列表,这中间遇到一个问题就是评论回复时,评论表单位置无法插入到当前要评论的回复下,这样的用户体验有点不好,查看了网页输出,Chrome 浏览器中一直报错 Cannot read property 'parentNode' of null
,在网上找了一圈,没有找到答案,于是自己就去研究,最初以为 jquery 库没有引用,但是尝试引用 jquery 库后仍然报错。
按报错理解,应该是找不到父节点,可是这个父节点是哪个呢?当时正好百度知道里面看过一个类似问题的回复,说到可能是 id 重复,这个回复给了我灵感,我在 Chrome 浏览器查找 id 节点,果真找到了点东西,先看一条 Typecho 回复事件的代码:
<a data-commentid="5" data-respondid="respond-post-3908" rel="nofollow" onclick="return TypechoComment.reply('comment-5', '5');">回复</a>
上面可以看出在 onclick 里面执行了一条 TypechoComent.replay 方法,这个方法里面有个 comment-5 很可能是是上面报错中提到的父节点 id ,于是我在代码里查找了一下,发现果真代码没有找到这个 comment-5 的id,又看了一下主题自定义里的调用id的地方,发现里面调用了错误的引用 <div id="comment-<?php $comments->theId(); ?>">
这里的问题是 <?php $comments->theId(); ?>
默认输出的并不是单独 id 而是输出的内容就是 comment-id
,所以上面错误引用输出的结果就是 comment-comment-id
。于是把上面错误引用更改为 <div id="<?php $comments->theId(); ?>">
即可。
延伸思考,因为上面评论默认回复引用代码为:<span class="comment-reply"><?php $comments->reply($singleCommentOptions->replyWord); ?></span>
这里是用系统自己的回复方法,所以如果想要自定义自己的方法,这样也能解决上面的问题,并且可以自定义父类的 id 而不是使用默认的 comment-id,自定义的方法如下:
<div class="reply" id="comment-reply-<?php echo $comments->coid;?>">
<a data-commentid="<?php echo $comments->coid;?>" data-respondid="<?php echo $comments->parameter->respondId;?>" rel="nofollow" onclick="return TypechoComment.reply('<?php echo $comments->theId; ?>', '<?php echo $comments->coid;?>');">回复</a>
</div>
其中 onclick 事件改成自己定义,也就能调用 TypechoComment.replay
时,自定义传入的参数 id 。
这个问题确实困扰了很久,不过现在总算折腾出来了,记录一下希望帮助到大家!