jQuery实现页面评论栏中访客信息自动填写功能的方法(1/2)

  

  %1s '), $comment_author); ?>Change
  


">      

 
在上面的代码中，会以 cookie 的方式记录评论者资料，并把评论者资料框的 div 赋予“ hidden ”的 class ，因此对于曾评论的访客，需要先隐藏起评论者资料框的 div ，可以使用 jQuery 的hide()事件隐藏该 div ，如果 jQuery 加载速度较慢，会出现打开页面时先出现 div ，片刻后再突然隐藏 div 的情况，这样显然不利用户体验，因此也可以直接写一条 css ——.hidden {display: none; }。

$('.hidden').hide();

3.然后再使用toggle()事件，slideUp()和slideDown()动画实现编辑评论者资料的功能。

$('#edit_profile').toggle(function(){
    $('.hidden').slideDown();
    },function(){
    $('.hidden').slideUp();
    });

4.为了提高用户体验，还需要使用text()方法在点击“Change”时把 Change 的字样改为“ Finish ”，当点击 Finish 时再把 Finish 字样改为“ Change Again ”。把以上代码整合，完整的 jQuery 代码如下：

jQuery(document).ready(function($){
$('.hidden').hide();
$('#edit_profile').toggle(function(){
    $('.hidden').slideDown();
    $('#edit_profile span').text("Finish");
    },function(){
    $('.hidden').slideUp();
    $('#edit_profile span').text("Change Again");
    });

});

PS：访客评论显示欢迎信息
我们通过判断$comment_author变量值是否为空，来确定访客是否在近期有评论（有 Cookie）。

if (!is_user_logged_in() && !empty($comment_author)) {
...
}

如果有，则在评论框上方显示欢迎信息：