用jQuery隐藏回头访客资料输入框

  上一篇文章提到的已经成功发表过评论的评论者在下次评论时仍需重新输入姓名,电邮地址的问题已经查明是由缓存插件Hyper Cache引起的,能找到的解决方法是利用js来解决,但无奈在我博客上测试不成功,只能暂时禁用此插件,同时在木木的指引下,我也发现了一个能提高访客体验度的功能:隐藏回头访客的姓名,电邮,网址输入框。

  按照木木提供的方法,我再次悲剧的发现用在我博客上并不能正常工作,只能再次Google&百度,找到最后,终于在Xiaorsz的博客中找到个利用jQuery实现的方法,测试后工作正常,下面写点改动的地方。

  首先,我们要编辑comments.php,在类似于:

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1"/>

的评论者姓名输入框代码上方添加:

<?php if ( $comment_author != "" ) : ?>
<div id="welcome">
<?php printf(__(' Hi! 欢迎回来!<strong>%s</strong>.'), $comment_author) ?>
</div>
<?php endif; ?>

然后再把三个评论者姓名,电邮,网址的代码输入框用<div id="author_info"></div>包起来,到此,comments.php修改结束;

  然后,新建一个名为inputhidden的js文件,把Xiaorsz提供的代码放进去:

$(document).ready(function() { //开始
if($('input#author[value]').length>0){ //判断用户框是否有值
$("#author_info").css('display','none'); //将id为author_info的对象的display属性设为none,即隐藏
var change='<span id="show_author_info" style="cursor: pointer; color:#2970A6;">change &raquo;</span>'; //定义change,style是定义CSS样式,让他有超链接的效果,color要根据你自己的来改,当然你也可以在CSS中定义#show_author_info来实现,这样是为了不用再去修改style.css而已!
var close='<span id="hide_author_info" style="cursor: pointer;color: #2970A6;">close &raquo;</span>'; //定义close
$('#welcome').append(change); //在ID为welcome的对象里添加刚刚定义的change
$('#welcome').append(close); // 添加close
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').click(function() { //鼠标点击change时发生的事件
$('#author_info').slideDown('slow') //用户输入框向下滑出
$('#show_author_info').css('display','none'); //隐藏change
$('#hide_author_info').css('display','inline'); //显示close
$('#hide_author_info').click(function() { // 鼠标点击close时发生的事件
$('#author_info').slideUp('slow') //用户输入框向上滑
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').css('display','inline'); })})}}) //显示change

保存文件。

  接着,我们要载入jQuery框架,因为我之前添加过Willin大师的Ajax嵌套回复,已经在footer.php添加过,所以这一步我可以省略,没有添加过的童鞋可以在footer.php中加入:

<script type="text/javascript" src="http://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

然后在下面继续添加:

<?php if ( is_singular() ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/inputhidden.js"></script>
<?php } ?>

这部的先后顺序一定不能错,不然就无法成功。

  OK,到此用jQuery隐藏回头访客资料输入框的全部操作就完成了,快试试去吧!Enjoy !

《用jQuery隐藏回头访客资料输入框》上有80条评论

    1. 呵呵,其实以前也无需再次输入,只是因为我装的缓存插件导致要再次输入,现在已经禁用了。。

        1. 呃。。谢谢willin大师,那个时候太单纯了。。还不知道有这种发中文spam的东西。。

      1. 在默认主题下测试也是IE中一切正常,但是firefox和chrome下无效,信息输入框全部消失了,只留下评论框了,你试试看

        1. 这段代码的目的就是让本地存在cookies的回头访客的资料输入框隐藏起来的,我这在ie6/7/8,firefox3.5,chrome3都很正常呢,你测试的主题是不是什么地方修改错了?默认主题我曾经也测试过,也很正常呢。。。

          1. 哈哈,马甲被你认出来了O(∩_∩)O~
            可以再QQ上向你请教一下么?我的是6583659

  1. 郁闷,无奈。
    我对这个东东相当的无语。我真不知道该怎么去弄。
    也就是jquery这东东。
    <script type="text/javascript" src="/js/inputhidden.js”>

    这段代码加在哪个文件里呢?能具体说下吗?只要我一碰到关联到这东西,我就没法做了,先谢谢博主啊。。

  2. 郁闷,我做了没效果啊,只有 Hi 欢迎回来。 这几句话。怎么办?

    1. 难道是因为你的评论者输入框那的命名问题(就是“昵称”、“信箱”、“网址”)?我对比了半天,就发现这和我的不同,你试着把命名方式改成这样的http://leo-n.com/demo/comments.txt,如果还是不行,那你再参考下http://immmmm.com/using-jquery-to-improve-experience.html这个方法。。

      1. 大大
        我木木大大和大大你的方法都試過了
        在IE都是正常的
        不過在火狐和google就是會消失…
        用原始碼看又沒有消失= =
        怎麼會這樣><

  3. 哦,看错了,汗。
    可以把if($(‘input#author[value]’).length>0)换成if ($(“#author”).val())就可以在1.4以上用了

      1. WP3.0默认主题twentyten是调用的comment_form()函数,要修改comment-template.php文件,直接复制进去无效,小白不懂php不知道该如何修改……

        1. 原来如此,建议你找一份3.0版本之前的默认主题,然后把twentyten中comments.php里的《?php comment_form(); ?》用之前默认主题的内容替换之,然后就能对照慢慢折腾了。

        2. 成功了,之前貌似是我本地调试用的jQuery有问题,弄来弄去把几段代码搞混了…………换google之后重头弄了一次成功了

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注