【备忘】JQuery纯前台实现多说回复可见

注:Z-Blog ASP 可以使用 回复可见(http://app.zblogcn.com/?id=493) 插件,支持多说和自带评论,并且是真正的隐藏。链接内附演示地址。


多说等社会化评论插件的方便不必多说,非论坛程序对回复可见功能的需求也是不在少数。

然后所谓纯前台的意思是隐藏掉的东西查看网页源码的话其实是可以看到的。所以略蛋疼。本文只是提供一种选择,而且重点是如何判断当前访客是否登陆多说及是否在本站发表过评论,因为多说不提供诸如 if (ds-当前访客已登陆多说){……}、if (ds-当前访客已评论此文){……}之类的JavaScript接口。。

大体思路,设元素ID为Hide:

1、需要引入JQuery(略);

2、将#Hide隐藏,放在$(function() {……})让其尽可能早的执行,或者用CSS设置;

3、自定义一个函数,传递参数为CSS选择器;

4、判断用户是否评论过即判断$('.ds-comments').html()、$(".ds-visitor .ds-visitor-name").html()两个值的包含关系,前者为评论列表,后者为当前登陆者的用户名,可按需写入Cookie(注①)。另读取这两个值时应该尽可能确保多说评论框已经加载完毕,所以使用了window.onload = function(){……}(注②);

5、如果用户没有评论过:备份#Hide内容后替换为提示语→如果用户已经登陆则给多说评论框的提交按钮绑定点击事件(注③)→点击提交时触发后续操作→设置Cookie→延迟0.5秒等待提交完成→还原#Hide内容→调用函数自身再次执行4、5步的判断;

6、显示#Hide,只是会根据4、5步的执行结果而显示不同内容;

7、函数要自动执行一次。

注:

①、SetCookie()和GetCookie()为z-blog自带的Cookie存取函数,其他程序无法直接调用。

②、也可以按需要放在$(function() {……})中的用户事件中,然后将“自调用”语句改成相应触发命令,只要确保第一次调用时页面的加载程度。

③、需要在多说设置中禁止未登陆用户评论。

CODE:

$(function() {
    $('#Hide').hide();
});
window.onload = function(){
    var srtName = GetCookie("inpName");
    //不使用Cookie时可改为 var srtName = $(".ds-visitor .ds-visitor-name").html(),则仅判断是否在当前页面评论过
    var TempHide = "";
    function ShowHide(e){
        if (!srtName||$('.ds-comments').html().indexOf(srtName)==-1){
            if (TempHide == ""){
                TempHide = $(e).html();
            };
            $(e).html('<p>此处内容不予显示,如有疑问请<a href="javascript:void(0)" id="ds-login" title="评论本文">回复</a></p>');
            $(document).delegate('#ds-login', 'click', function() {
                $("html,body").animate({scrollTop: $('.ds-textarea-wrapper textarea').offset().top-200}, 500);
                $('.ds-textarea-wrapper textarea').focus();
            });//直接使用#respond定位感觉不太科学
            if ($(".ds-visitor .ds-visitor-name").html()){
                $('.ds-post-button').click(function(){
                        srtName = $(".ds-visitor .ds-visitor-name").html();
                        SetCookie("inpName",srtName,365);//不使用Cookie请去掉本行
                        t = setTimeout(function() {
                            $(e).html(TempHide);
                            $("html,body").animate({scrollTop: $(e).offset().top-200}, 500);//滚动页面到$(e)的位置
                            ShowHide(e);//自调用
                        },500)
                });
            };
        };
        $(e).show();
    };
    ShowHide('#Hide');
}

原文链接:https://www.wdssmq.com/post/20140425674.html

Denton
Denton 发布于 2016/1/18 11:25:38  
[godsay2-人艰不拆]
回复
啃啃
啃啃 发布于 2015/11/23 8:42:15  
[godsay4-不明觉厉]
回复
高道江
高道江 发布于 2015/7/3 13:27:11  
[害羞]
回复
高道江
高道江 发布于 2015/7/3 13:06:25  
试试
回复
小杨
小杨 发布于 2015/1/6 23:05:45  
不错,加油
回复
搜索客
搜索客 发布于 2014/12/22 20:56:34  
【测试】多说回复可见 | 我的那些事<br />
<a href="http://ssk.91txh.com/247" target="_blank" rel="nofollow">http://ssk.91txh.com/247</a><br />
<br />
终于搞出来了,服务端判断隐藏,这回右键查看源代码也不会看到啦 <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" title="[嘻嘻]" class="ds-smiley" />
回复
想要逃离的思想旅行
想要逃离的思想旅行 发布于 2014/12/11 17:48:40  
[godsay2-人艰不拆]
回复
Denton
Denton 发布于 2014/12/7 15:52:20  
[godsay1-贱人就是矫情]
回复
音乐不是饭
音乐不是饭 发布于 2014/10/30 0:14:29  
试试看这个效果
回复
搜索客
搜索客 发布于 2014/9/4 20:59:49  
代码收走研究研究,不过我好像没看到显示什么东西啊
沉冰浮水
沉冰浮水 发布于 2014/9/4 22:55:21  
因为没启用
搜索客
搜索客 发布于 2014/9/4 22:57:57  
已经测试了,可以隐藏,不过右键查看代码就能看到了,有没有不能看到的方法? <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_org.gif" alt="[可怜]" title="[可怜]" class="ds-smiley" />
沉冰浮水
沉冰浮水 发布于 2014/9/4 23:00:09  
Zblog有插件,别的程序我不会
回复
回复
回复
回复
搜索客
搜索客 发布于 2014/9/4 20:54:31  
看看效果
回复
不不博客
不不博客 发布于 2014/8/31 22:04:11  
我来看看效果呢
回复
占胖
占胖 发布于 2014/8/25 23:56:10  
啊,挺好的
回复
胡倡萌
胡倡萌 发布于 2014/6/6 16:08:13  
测试一下
回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。