jquery:简单的wordpress评论回复功能

jquery:简单的wordpress评论回复功能

在最近接触了jQuery一段时间之后，受启发于记忆中当年百度贴吧弱弱的回复功能，试着做了一个用jQuery实现的。

功能是间接地实现了，当然还是有很多的不足，毕竟只是前台页面的一些小动作，效果当然无法与真正的回复嵌套相媲美了。反过来说它只用了jQuery而不需要更改后台程序，操作简单也不影响后期的程序升级；所谓的评论回复只是在文本中体现，避免了真正的回复嵌套必需要求主题支持的麻烦。这只是一个jQuery效果，当然不只局限于wordprss，此方法还可以用在其它很多地方，任何你想在提交表单前添加一些内容的时候。

原理

当点击某条评论后的“回复”按钮时：
1.获取当前评论的相关信息如作者、发布时间等；
2.向评论内容输入框前插入“回复：****”的提示；当然要先判断一下，如果已存在提示，就拿现在被点击的这条信息替代它；
3. 用户点击提交按钮时，把“##回复：****##”插入到评论内容的最前面，这样在通过审核显示后，针对该评论发表的回复最前面就会有“##回复：评论信息****##”的字样了。我们所说的评论回复功能说的就是这个笨方法，又低级又简单吧。

结构

如果你也是不太明白主题制作的话，那顺便也看一下我的“comments.php”里相关内容吧，了结一下html结构：

<span class="plinfo"><strong><?php comment_author_link() ?></strong>&nbsp;发表于&nbsp;<?php comment_date('Y年m月d日') ?>&nbsp;<?php comment_time() ?></span>&nbsp;<span class="plreplay">回复</span>

也就是：

<span class="plinfo">某某 发表于 某时间</span><span class="plreplay">回复按钮</span>

jQuery

/* 54173BLOG的jquery评论回复功能 */
$(function() {
    var plinfo; //plinfo：要回复的评论的相关信息
    $(".plreply").click(function() { //当用户点击回复按钮时
        $("span.okplinfo").remove(); //先移除现有回复评论的提示
        plinfo = "回复：" + $(this).prev(".plinfo").text(); //在评论相关信息的前面加上“回复：”，以便提交表单时调用
        $("#comment").before("<span class='okplinfo'>" + plinfo + "</span>").focus(); //在评论内容框前添加回复评论的提示，并使评论框获得焦点方便用户直接输入
    });

    $("#submit").click(function() { //当用户提交表单时
        if($("span.okplinfo").length) { //根据html标签判断评论框前是否存在回复某评论的提示，如果有则执行下面三句
            var text = $("#comment").val(); //获取当前评论框的内容
            $("#comment").val("##" + plinfo + "##\n" + text); //把“##回复：****##”和一个换行符插入到评论内容的前面，构成新的评论框内容
            $("#commentform").css("visibility","hidden"); //点击提交后隐藏表单，是为了防止在提交未成功前用户修改“##回复：****##”中的内容，从而影响回复评论的真实有效性
        }
    });
});
/* 在这些代码之前，用户点击回复按钮时有两个判断动作，分别判断当前页面是否有回复提示以及被点击的评论是否和当前回复提示的是同一条。后来感觉这个评论回复功能特点是简单，两次判断增加了不少代码，所以就改为不判断直接实现。*/

有需要的同学直接看本页面的源文件，CSS就不贴出了，自己按需定制吧。

从构思到实现，过程中遇到了一些问题，比如说提交表单后如果网速慢的情况下“回复：****”的内容可以被修改，后来也是通过“visibility:hidden;”这样的方法来间接解决，总体过程还算顺利。效果一完成就拿出来跟大家分享，其中必定有一些不足和改进的空间，还望后来的同学和前辈们多多指点。

作者：mming。54173BLOG原创，转载请保留本文链接：http://www.54173.cn/blog/?p=475。