TYPECHO WIKI
每一个作品都值得被记录

Typecho 实现 ajax 评论功能

Typecho维基君Typecho教程 • 4245次浏览 • 发布 2018-05-18 • 更新 2018-05-18

Typecho 评论实现 Ajax 有个插件 AjaxComments ,不过有些网友反馈说该插件有小 bug,不太好用,所以就产生了下面的这段代码,大家可以直接复制以下的修改版代码,在公共 js 中调用 ajaxComments() 方法即可。

function ajaxComment() {
    var selector = {
        commentMainFrame: '#comment',
        commentList: '#commentlist',
        commentNumText: '#comment h3',
        commentReplyButton: '#comment span.reply',
        submitForm: '#commentform',
        submitTextarea: '#textarea',
        submitButton: '#submit',
    };
    var parentId = '';
    bindCommentReplyButton();
    $(selector.submitTextarea).after('<div style="display:none;" id="ajaxCommentMsg"><\/div>');
    $msg = $('#ajaxCommentMsg');
    $(document).on('submit', selector.submitForm, function() {
        $msg.empty();
        $(selector.submitButton).val('发射中哦=A=');
        $(selector.submitButton).attr('disabled', true).fadeTo('slow', 0.5);
        if ($(selector.submitForm).find('#author')[0]) {
            if ($(selector.submitForm).find('#author').val() == '') {
                message('昵称没填呢QAQ');
                enableCommentButton();
                return false;
            }
            if ($(selector.submitForm).find('#mail').val() == '') {
                message('邮箱没填呢QAQ');
                enableCommentButton();
                return false;
            }
            var filter = /^[^@\s<&>]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
            if (!filter.test($(selector.submitForm).find('#mail').val())) {
                message('邮箱地址不正确呢QAQ');
                enableCommentButton();
                return false;
            }
        }
        if ($(selector.submitForm).find(selector.submitTextarea).val() == '') {
            message('评论似乎什么也没写呢QAQ');
            enableCommentButton();
            return false;
        }
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serializeArray(),
            error: function() {
                message('发射失败,请重试!');
                setTimeout(NProgress.done, 500)
                enableCommentButton();
                return false;
            },
            success: function(data) {
                if (!$(selector.commentList, data).length) {
                    errorMsg = data.match(/.+/g).join().match(/\<div.+\>.+\<\/div\>/g).join().match(/[^\,]+/g);
                    $msg.html(errorMsg[0] + errorMsg[1] + errorMsg[2]);
                    enableCommentButton();
                    return false;
                } else {
                    userCommentId = $(selector.commentList, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) {
                        return a - b;
                    }).pop();
                    commentLi = '<li id="comment-' + userCommentId + '" class="comment">' + $('#comment-' + userCommentId, data).html(); + '<\/li>';
                    if (parentId) {
                        if ($('#' + parentId).find(".comment-children").length <= 0) {
                            $('#' + parentId).append("<ul class='children'></ul>");
                        }
                        $('#' + parentId + " .children:first").append(commentLi);
                        parentId = ''
                        $body.animate({
                            scrollTop: $('#comment-' + userCommentId).offset().top - 450
                        }, 900);
                    } else {
                        $(selector.commentList).prepend(commentLi)
                        $body.animate({
                            scrollTop: $('#comment-' + userCommentId).offset().top - 200
                        }, 900);
                    }
                    //$('#comment-' + userCommentId).slideDown('slow');

                    //console.log(userCommentId);
                    $(selector.commentNumText).length ? (n = parseInt($(selector.commentNumText).text().match(/\d+/)), $(selector.commentNumText).html($(selector.commentNumText).html().replace(n, n + 1))) : 0;
                    TypechoComment.cancelReply();
                    $(selector.submitTextarea).val('');
                    $(selector.commentReplyButton + ' b, #cancel-comment-reply-link').unbind('click');
                    bindCommentReplyButton();
                    enableCommentButton();

                }
            }
        });
        return false;
    });

    function bindCommentReplyButton() {
        $(document).on('click', selector.commentReplyButton, function() {
            parentId = $(this).parents('li.comment').attr("id");
            $(selector.submitTextarea).focus();
        });
        $(document).on('click', '#cancel-comment-reply-link', function() {
            parentId = '';
        });
    }

    function enableCommentButton() {
        $(selector.submitButton).attr('disabled', false).fadeTo('', 1);
        $(selector.submitButton).val('发射=A=');
    }

    function message(msg) {
        $msg.hide();
        $msg.html(msg).slideToggle('fast');
    }
}
广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,Typecho.Wiki所有文章均包含本声明。
厂商投放

【腾讯云】🎉五一云上盛惠!云服务器99元/月续费同价!

腾讯云五一劳动节海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!

广告
添加新评论 »