訪客信息自動填寫即是利用cookie來記錄訪客第一次評論時填寫的信息,這樣以后再評論時實現(xiàn)一個自動填寫,這里我們以WordPress為例展示jQuery實現(xiàn)頁面評論欄中訪客信息自動填寫功能的方法:

首先簡單說一說仿登陸的具體操作，用戶第一次登陸時會出現(xiàn)用于填寫評論者資料的框，當用戶評論完成后，將會以 cookie 的方式記錄評論者資料，一年后 cookie 自動清除，當用戶再次評論時填寫評論者資料的 div 將會隱藏，當用戶點擊“ Change ”時可以再次編輯評論者資料，同時 Change 字樣會改為“ Finish ” ，點擊 Finish 時填寫評論者資料的 div 將會再次隱藏，同時 Change 字樣將會改為 Change Again 。

以下是分步敘述如何使用 jQuery 實現(xiàn)以上效果，如果只想實現(xiàn)效果的童鞋可以直接看代碼。

1.加載 jQuery 庫，這是必須的。

2.把 comments.php 的評論者資料框代碼和評論框代碼按如下修改：

<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) : ?>

  <div class="commentwelcome">

  <?php printf(__('歡迎發(fā)表評論! <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 加載速度較慢，會出現(xiàn)打開頁面時先出現(xiàn) div ，片刻后再突然隱藏 div 的情況，這樣顯然不利用戶體驗，因此也可以直接寫一條 css ——.hidden {display: none; }。

$('.hidden').hide();

3.然后再使用toggle()事件，slideUp()和slideDown()動畫實現(xiàn)編輯評論者資料的功能。

$('#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) 方法調(diào)用之前。

接下來，我們通過 Javascript 來實現(xiàn)訪客信息更改：

/* 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('隱藏');

    }  

  }); 

}); 

這樣，如果用戶需要更新信息時，可以點擊歡迎信息右側(cè)的更改按鈕；修改完成之后，用戶信息會在評論后更新。