jQuery完成页面评论栏中访客信息主动填写性能的办法

首先简略说一说仿登陆的详细操作,用户**次登陆时会呈现用于填写评论者材料的框,当用户评论实现后,将会以 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实现页面评论栏中访客信息自动填写功能的方法》的一些看法。更多内容请查看本栏目更多内容!

版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
wordpress后盾关上迟缓的处理办法(暂时)

最近关上博客后盾,发现后盾关上速度很慢。 经过开发者调试工具对网络加载进行检测,发现是因为后盾应用了谷...

wordpress模板罕用函数集锦

根本模板文件 style.css : CSS(款式表)文件index.php : 主页模板archive.php : Archive/Category模板404.ph...

wordpress网站被挂马以及进攻办法

兴许大家在一些时分可能会遇到这样一个状况,就是在关上一个正轨网站的时分点击了一个页面或许目录忽然跳转到...

解析WordPress中的post_class与get_post_class函数

post_class() post_class 是 WordPress 内置的一个用于显示文章 class 称号的函数,该函数通常会为每一篇文...

WordPress中访客登陆完成邮件提示的PHP脚本实例分享

登陆邮件提示完成办法 前提是空间有邮件性能,测试有无邮件性能的办法:登录界面点击“遗记明码”,有邮件...

WordPress完成加入登录后跳转到指定页面的办法

本文实例讲述了WordPress完成加入登录后跳转到指定页面的办法。分享给大家供大家参考。详细办法如下: 有时...

需求提交

客服服务

亿鸽在线客服系统