首先简略说一说仿登陆的详细操作,用户**次登陆时会呈现用于填写评论者材料的框,当用户评论实现后,将会以 cookie 的形式记载评论者材料,一年后 cookie 主动肃清,当用户再次评论时填写评论者材料的 p 将会暗藏,当用户点击“ Change ”时能够再次编辑评论者材料,同时 Change 字样会改为“ Finish ” ,点击 Finish 时填写评论者材料的 p 将会再次暗藏,同时 Change 字样将会改为 Change Again 。
以下是分步叙说如何应用 jQuery 完成以上成果,假如只想完成成果的童鞋能够间接看代码。
1.加载 jQuery 库,这是必需的。
2.把 comments.php 的评论者材料框代码和评论框代码按如下修正:
<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) : ?> <p class="commentwelcome"> <?php printf(__('欢送宣布评论! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" title="从新填写材料" href="javascript:void(0);"><span>Change</span></a> </p> <?php endif; ?> <p class="<?php echo $comment_author_email ? 'hidden' : 'profile'; ?>"> <!-- 评论者材料框代码 --> </p> <!-- 评论框代码 -->
在下面的代码中,会以 cookie 的形式记载评论者材料,并把评论者材料框的 p 赋予“ hidden ”的 class ,因而关于曾评论的访客,需求先暗藏起评论者材料框的 p ,能够应用 jQuery 的hide()事情暗藏该 p ,假如 jQuery 加载速度较慢,会呈现关上页面时先呈现 p ,片刻后再忽然暗藏 p 的状况,这样显然不利用户体验,因而也能够间接写一条 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'] = '</p>' . $comments_args['comment_field']; $comments_args['comment_notes_before'] = $welcome_login . '<p 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('暗藏'); } }); });
这样,假如用户需求更新信息时,能够点击欢送信息右侧的更改按钮;修正实现之后,用户信息会在评论后更新。
以上就是安达网络工作室关于《jQuery实现页面评论栏中访客信息自动填写功能的方法》的一些看法。更多内容请查看本栏目更多内容!
图片上传 文件预备:新建php文件,我用默许主题Twenty Ten来测试,首先在这个主题的文件夹下新建一个文件-m...
露兜博客首页的访客可自行抉择文章排序形式的成果是怎样做的,明天就来给大家分享这个文章排序成果的完成进...
1.增加性能 在function.php中拔出代码 add_theme_support('post-thumbnails'); 拔出之后会在后盾编辑文章的...
利用弱小的技术,能够把基于WordPress的网站做成各种各样的方式,这除了要求WordPress主题开发人员通晓HTML...
在wordpress模板制造进程中,有一些貌似复杂的成绩,其实只需确定了成绩呈现的地位,大少数都能够自行处理。...
首先关上网站根目录下的 wp-config.php,而后搜寻 define('WPLANG' 就能够疾速定位到言语设置那里 比方简体...