用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.loli.net/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 !

评论

  1. 12年前
    2009-11-05 19:32:33

    我来试试~~
    收藏了,有空做一下

  2. 12年前
    2009-11-05 19:33:07

    验证可用,哈哈

    • Leo.N 博主
      12年前
      2009-11-05 22:01:32

      感谢测试,哈哈!

  3. 12年前
    2009-11-05 22:34:29

    主题有这个功能,不过没启用……

    • Leo.N 博主
      12年前
      2009-11-06 12:38:51

      你的主题很强力。。。

      • 12年前
        2009-11-06 22:06:54

        所以我始终没放弃它啊~~主题真是越整越爽~~

  4. 12年前
    2009-11-05 22:59:03

     Hi! 欢迎回来! Dianso

    这个效果好,省的以后再输入。

    • Leo.N 博主
      12年前
      2009-11-06 12:39:49

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

  5. 12年前
    2009-11-06 1:40:33

    这个倒是挺好

  6. 12年前
    2009-11-06 13:59:29

    MS挺有意思的,我先试试效果

  7. 12年前
    2009-11-06 17:11:55

    [ 小牆判斷這是Spam! ]
    欢迎回访哦….

    • Leo.N 博主
      12年前
      2009-11-08 18:07:39

      谢谢!话说你的评论被误判为spam了。。实在抱歉!

      • 12年前
        2010-6-21 21:16:01

        他用 ‘骨頭’ 發的 spam, 看他這裏 http://www.benmao.com/archives/1087#comment-11670 骨頭回訪的.

        • Leo.N 博主
          12年前
          2010-6-21 23:03:02

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

  8. 12年前
    2009-11-06 22:04:15

    对哦,我还在用原来直接加在comments.php里的JavaScript的呢……试试去

  9. 12年前
    2009-11-06 22:07:00

    哈,你也加上关闭侧边栏啦,不错不错~~

    • Leo.N 博主
      12年前
      2009-11-08 18:13:04

      这叫追随你的步伐,哈哈!

  10. 12年前
    2009-11-07 9:32:39

    [ 小牆判斷這是Spam! ]
    过来支持一下….

    • Leo.N 博主
      12年前
      2009-11-08 18:07:10

      谢谢!你的评论被误判为spam了。。实在抱歉!

      • 12年前
        2010-6-21 21:16:58

        這應該也是 spam.

  11. 12年前
    2009-11-07 16:30:16

    哇~终于实现这效果了。

    • Leo.N 博主
      12年前
      2009-11-08 18:11:38

      嘿嘿,是时候跟进时代步伐了。。

  12. 12年前
    2009-11-07 16:37:28

    试一试,这个功能很实用。

  13. 12年前
    2009-11-08 0:28:23

    哈哈,我不死回头客~~我要当常客!

    • Leo.N 博主
      12年前
      2009-11-08 18:12:40

      哈哈,欢迎当常客!

  14. 12年前
    2009-11-08 11:56:10

    很好,谢谢

    • Leo.N 博主
      12年前
      2009-11-08 18:12:04

      不客气,欢迎使用!

  15. 12年前
    2009-11-08 12:17:56

    测试一下

  16. 12年前
    2009-12-03 11:32:55

    测试一下,我试了试在firefox无效呢

    • Leo.N 博主
      12年前
      2009-12-03 12:16:13

      在我这很正常呢,你强制刷新下缓存试试。。。

      • 12年前
        2009-12-03 12:20:50

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

        • Leo.N 博主
          12年前
          2009-12-03 12:28:39

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

          • 12年前
            2009-12-03 12:34:50

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

          • 12年前
            2009-12-03 13:00:00

            OK,正常了O(∩_∩)O~

          • Leo.N 博主
            12年前
            2009-12-03 13:01:22

            已经加你了。

  17. gil
    12年前
    2009-12-03 11:34:26

    我再试试

    • Leo.N 博主
      12年前
      2009-12-03 12:17:47

      上面那是你马甲,哈哈。。

  18. 12年前
    2009-12-13 4:41:35

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

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

    • Leo.N 博主
      12年前
      2009-12-13 16:35:07

      放在footer.php或comment.php里都行

      • 12年前
        2009-12-13 17:07:22

        谢谢,我再去试试

  19. 12年前
    2009-12-14 1:00:36

    我还是不会!呜呜!

    • Leo.N 博主
      12年前
      2009-12-14 12:33:30

      =。=我感觉我说的已经够明了了呀。。。

      • 12年前
        2009-12-14 14:43:03

        但是失败了!呜呜!评论之后全是乱码了!

        • Leo.N 博主
          12年前
          2009-12-14 18:54:22

          你是不是在编辑模板的时候编码弄错了?必须是utf8啊。。。

          • 12年前
            2009-12-15 23:36:34

            utf8是?

          • Leo.N 博主
            12年前
            2009-12-18 19:50:46

            文字编码。。

  20. Nox
    12年前
    2009-12-19 17:35:34

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

  21. Nox
    12年前
    2009-12-20 23:43:29

    好了,OK了,嘿嘿。

    • Leo.N 博主
      12年前
      2009-12-21 13:56:41

      解决了就好,我估计你之前可能是忘记加载jq库了。。

  22. Nox
    12年前
    2010-1-11 23:00:13

    咋还没有回来。。。

  23. AnQ
    12年前
    2010-1-25 14:04:57

    我刚才测试了一下这个方法,应该还比较好的

  24. 12年前
    2010-1-26 21:50:36

    好方法啊~学习了!

  25. 12年前
    2010-2-04 20:57:23

    留言测试一下

  26. 12年前
    2010-2-09 16:00:44

    大大
    我做都正常也都成功^^
    不過隔了一夜…
    我的輸入資料的框框都不見了 >O<
    (用google或火狐看)
    http://silentnight.twbbs.org/error/google.PNG
    不過用IE看就有出現
    http://silentnight.twbbs.org/error/ie.PNG
    怎麼會這樣呢= 口 =

    • Leo.N 博主
      12年前
      2010-2-09 19:46:05

      待会帮你看下。。现在有点忙。。

    • Leo.N 博主
      12年前
      2010-2-09 23:23:32

      看了半天,没找到问题所在,建议你把你修改过的主题发给我看下。。

  27. 12年前
    2010-2-10 12:01:34
    • Leo.N 博主
      12年前
      2010-2-10 13:52:08

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

      • 12年前
        2010-2-10 17:10:56

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

      • 12年前
        2010-2-12 12:11:47

        大大
        我解決問題了=口=
        謝謝你T_T

        • Leo.N 博主
          12年前
          2010-2-14 23:22:21

          恭喜!其实我也没帮上什么忙。。实在惭愧。

  28. 12年前
    2010-6-25 10:33:07

    不小心发现自己主题自带这个功能

  29. 11年前
    2010-7-17 0:17:22

    jquery1.4.2是不是不行呢,问题和上面的一样,也是会消失3个输入框

    • Leo.N 博主
      11年前
      2010-7-17 2:24:18

      应该是跟版本有关系,建议你尝试下1.32,我一直在用的是1.23。。。

  30. 11年前
    2010-8-20 19:43:33

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

    • Leo.N 博主
      11年前
      2010-8-22 14:43:50

      感谢指点~

  31. 11年前
    2010-8-20 21:11:58

    这个我去试试 移植到te

  32. 11年前
    2010-9-19 22:27:20

    请问在评论者姓名输入框代码上方添加代码怎么用到comment-template.php里div id=”respond”下?

    • Leo.N 博主
      11年前
      2010-9-20 13:29:58

      一样的,我文中所述的都是在div id=”respond”下面添加的。

      • 11年前
        2010-9-20 21:30:54

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

        • Leo.N 博主
          11年前
          2010-9-21 5:47:56

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

        • 11年前
          2010-9-21 12:02:04

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

  33. 11年前
    2010-10-16 8:09:27

    验证一下…

  34. 11年前
    2010-12-27 10:30:15

    学习了,回去折腾一下.

  35. 11年前
    2011-3-06 20:31:30

    不知道是不是插件问题引起的,我这里就是不隐藏!!想死!

    • 11年前
      2011-3-06 20:34:56

      成功了,不知道为什么加在底部不成功,而加在头部OK!

      • Leo.N 博主
        11年前
        2011-3-06 20:50:43

        成功就好~简单的说,jq库要加载在脚本之前,脚本才能运行。。

  36. jixiangac
    11年前
    2011-4-22 0:11:13

    隐藏了确实能增加点体验效果~

  37. chenye
    10年前
    2011-9-21 15:31:47

    sdfsdf隐藏了确实能增加点体验效果~

  38. 10年前
    2012-5-14 22:41:50

    有时候会有冲突的吧 我试试看

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇