首先簡單說一說仿登陸的具體操作，用戶第一次登陸時會出現用于填寫評論者資料的框，當用戶評論完成后，將會以 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('隱藏'); } }); }); 這樣，如果用戶需要更新信息時，可以點擊歡迎信息右側的更改按鈕；修改完成之后，用戶信息會在評論后更新。
新聞熱點
疑難解答
