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

首先简单说一说仿登陆的具体操作，用户第一次登陆时会出现用于填写评论者资料的框，当用户评论完成后，将会以 cookie 的方式记录评论者资料，一年后 cookie 自动清除，当用户再次评论时填写评论者资料的 div 将会隐藏，当用户点击“ Change ”时可以再次编辑评论者资料，同时 Change 字样会改为“ Finish ” ，点击 Finish 时填写评论者资料的 div 将会再次隐藏，同时 Change 字样将会改为 Change Again 。
以下是分步叙述如何使用 jQuery 实现以上效果，如果只想实现效果的童鞋可以直接看代码。
1.加载 jQuery 库，这是必须的。
2.把 comments.php 的评论者资料框代码和评论框代码按如下修改：

<?php if（isset（$_COOKIE["comment_author_email_".COOKIEHASH]） && isset（$_COOKIE["comment_author_".COOKIEHASH]）） : ?><div class="commentwelcome"><?php printf（__（"欢迎发表评论！ <strong>%1s</strong> "）, $comment_author）; ?><a id="edit_profile" title="重新填写资料" href="javascript:void（0）;"><span>Change</span></a></div><?php endif; ?> <div class="<?php echo $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 字样改为“ 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）） {...}

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

if （！is_user_logged_in（） && ！empty（$comment_author）） {$welcome_login = "<p id="welcome-login"><span>欢迎回来, <strong>" . $comment_author . "</strong>.</span>";$welcome_login .= " <span id="toggle-author"><u>更改</u> <i class="icon-signout"></i></span></p>";$comments_args["comment_field"] = "</div>" . $comments_args["comment_field"];$comments_args["comment_notes_before"] = $welcome_login . "<div id="author-info" class="hide">";}

以上代码，需要添加到主题的 comment.php 文件 comment_form（$comments_args）方法调用之前。
接下来，我们通过 Javascript 来实现访客信息更改：

/* Toggle comment user */$（"#comments"）.on（"click", "#toggle-author", function （） { $（"#author-info"）.slideToggle（function （） { if （$（this）.is（":hidden"）） {/* Update author name in the welcome messages */$（"#welcome-login strong"）.html（$（"#author"）.val（））;/* Update the toggle action name */$（"#toggle-author u"）.html（"更改"）;} else {/* Update the toggle action name */$（"#toggle-author u"）.html（"隐藏"）;}}）; }）;

这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。