首页 > 编程 > JavaScript > 正文

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

2019-11-20 09:57:12
字体:
来源:转载
供稿:网友

首先简单说一说仿登陆的具体操作,用户第一次登陆时会出现用于填写评论者资料的框,当用户评论完成后,将会以 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('隐藏');    }    }); }); 

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表