jQuery实现页面评论栏中访客信息自动填写功能的方法
首先简单说一说仿登陆的具体操作，用户第一次登陆时会出现用于填写评论者资料的框，当用户评论完成后，将会以cookie的方式记录评论者资料，一年后cookie自动清除，当用户再次评论时填写评论者资料的div将会隐藏，当用户点击“Change”时可以再次编辑评论者资料，同时Change字样会改为“Finish”，点击Finish时填写评论者资料的div将会再次隐藏，同时Change字样将会改为ChangeAgain。
以下是分步叙述如何使用jQuery实现以上效果，如果只想实现效果的童鞋可以直接看代码。
1.加载jQuery库，这是必须的。
2.把comments.php的评论者资料框代码和评论框代码按如下修改：
<?phpif(isset($_COOKIE['comment_author_email_'.COOKIEHASH])&&isset($_COOKIE['comment_author_'.COOKIEHASH])):?>
<divclass="commentwelcome">
<?phpprintf(__('欢迎发表评论!<strong>%1s</strong>'),$comment_author);?><aid="edit_profile"title="重新填写资料"href="javascript:void(0);"><span>Change</span></a>
</div>
<?phpendif;?>
<divclass="<?phpecho$comment_author_email?'hidden':'profile';?>">
<!--评论者资料框代码-->
</div>
<!--评论框代码-->
在上面的代码中，会以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字样改为“ChangeAgain”。把以上代码整合，完整的jQuery代码如下：
jQuery(document).ready(function($){
$('.hidden').hide();
$('#edit_profile').toggle(function(){
$('.hidden').slideDown();
$('#edit_profilespan').text("Finish");
},function(){
$('.hidden').slideUp();
$('#edit_profilespan').text("ChangeAgain");
});
});
PS：访客评论显示欢迎信息
我们通过判断$comment_author变量值是否为空，来确定访客是否在近期有评论（有Cookie）。
if(!is_user_logged_in()&&!empty($comment_author)){
...
}
如果有，则在评论框上方显示欢迎信息：
if(!is_user_logged_in()&&!empty($comment_author)){
$welcome_login='<pid="welcome-login"><span>欢迎回来,<strong>'.$comment_author.'</strong>.</span>';
$welcome_login.='<spanid="toggle-author"><u>更改</u><iclass="icon-signout"></i></span></p>';
$comments_args['comment_field']='</div>'.$comments_args['comment_field'];
$comments_args['comment_notes_before']=$welcome_login.'<divid="author-info"class="hide">';
}
以上代码，需要添加到主题的comment.php文件comment_form($comments_args)方法调用之前。
接下来，我们通过Javascript来实现访客信息更改：
/*Togglecommentuser*/
$('#comments').on('click','#toggle-author',function(){
$('#author-info').slideToggle(function(){
if($(this).is(':hidden')){
/*Updateauthornameinthewelcomemessages*/
$('#welcome-loginstrong').html($('#author').val());
/*Updatethetoggleactionname*/
$('#toggle-authoru').html('更改');
}else{
/*Updatethetoggleactionname*/
$('#toggle-authoru').html('隐藏');
}
});
});
这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。