用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 ！

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

评论 (0)