| 标题 | jQuery实现页面评论栏中访客信息自动填写功能的方法 |
| 内容 | 访客信息自动填写即是利用cookie来记录访客第一次评论时填写的信息,这样以后再评论时实现一个自动填写,这里我们以WordPress为例展示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> <?php printf(__('欢迎发表评论! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" href="javascript:void(0);"><span>Change</span></a> </div> <?php endif; ?> <div> <!-- 评论者资料框代码 --> </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></i></span></p>'; $comments_args['comment_field'] = '</div>' . $comments_args['comment_field']; $comments_args['comment_notes_before'] = $welcome_login . '<div id="author-info">'; } 以上代码，需要添加到主题的 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('隐藏'); } }); }); 这样，如果用户需要更新信息时，可以点击欢迎信息右侧的更改按钮；修改完成之后，用户信息会在评论后更新。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。