跳到正文内容
湛蓝
  • 首页
  • 博文
  • 笔记
    医学笔记 整理与分享文献、手术病例等专业资料 日常杂记 平时一些比较值得记录的杂记 随心所记 记录与分享各类灵感
    • 医学笔记
    • 日常杂记
    • 随心所记
  • 日志
    日常记事 记日常琐事,品生活百态 有感而发 片段式灵感源,一触即发 工作日志 日期、任务、进度、问题、总结
    • 日常记事
    • 有感而发
    • 工作日志
  • 漫游影视
    动漫电影 动画漫画 游戏佳作 精彩影片 电视剧集 三味书屋
    • 动漫电影
    • 动画漫画
    • 游戏佳作
    • 精彩影片
    • 电视剧集
    • 三味书屋
  • 留言板
  • 更多
    关于 友情链接 归档
    • 关于
    • 友情链接
    • 归档
Not By AI

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

文章由 湛蓝 创作,遵循 CC-BY-NC 协议
  • 2
  • 2022-07-25

文章摘要deepseek-v4-pro

介绍通过修改comments.php、新建inputhidden.js并正确载入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; ?>

然后再把三个评论者姓名,电邮,网址的代码输入框用

包起来,到此,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 !

本文完结

赞 (0)
下一篇 解决文件夹隐藏属性无法取消的办法
评论 (0)
再想想

您可能感兴趣的

暂无相关文章。

END hide-the-input-box-for-returning-visitor-information-using
I.D.E.A.DesignCodingOpen SourceThoughtsNot By AIAI Powered
I.D.E.A.DesignCodingOpen SourceThoughtsNot By AIAI Powered

近期更新

  • 一个 Typecho 站被入侵之后new
  • 世界,您好!

最新评论

  • 好的牛奶
  • 观摩一下牛奶
  • 您好,这是一条评论。若需要审核、编辑或…一位 WordPress 评论者

找到我

  • 微信二维码

最佳浏览体验
推荐浏览器:

Chrome / Edge

博友圈

中国医院时光记更多
  • ©2026
  • CC-BY-NC
  • 湛蓝 版权所有
  • 苏ICP备2025162006号-1
  • 萌ICP备ICP20268020号
Forever Blog虫洞SpaceX异次元之旅
  • 站点地图

Powered by WordPress · 湛蓝

0%
  • 首页
  • 博文
  • 笔记
    • 医学笔记
    • 日常杂记
    • 随心所记
  • 日志
    • 日常记事
    • 有感而发
    • 工作日志
  • 漫游影视
    • 动漫电影
    • 动画漫画
    • 游戏佳作
    • 精彩影片
    • 电视剧集
    • 三味书屋
  • 留言板
  • 更多
    • 关于
    • 友情链接
    • 归档
搜索 (0)
    加载更多...
    最新推荐
    • 一个 Typecho 站被入侵之后
    • 直肠癌诊疗进展与循证医学实践
    • 世界,您好!
    • 解决文件夹隐藏属性无法取消的办法
    • 用jQuery隐藏回头访客资料输入框
    热门阅读
    • 世界,您好! 1,311 阅读
    • 直肠癌诊疗进展与循证医学实践 1,102 阅读
    • 一个 Typecho 站被入侵之后 11 阅读
    • 用jQuery隐藏回头访客资料输入框 2 阅读
    • 解决文件夹隐藏属性无法取消的办法 1 阅读
    推荐标签
    诺兰悬疑通识法理进化论日剧京都动画漫画像素开放世界双雪涛