首先簡(jiǎn)單說(shuō)一說(shuō)仿登陸的具體操作，用戶(hù)第一次登陸時(shí)會(huì)出現(xiàn)用于填寫(xiě)評(píng)論者資料的框，當(dāng)用戶(hù)評(píng)論完成后，將會(huì)以 cookie 的方式記錄評(píng)論者資料，一年后 cookie 自動(dòng)清除，當(dāng)用戶(hù)再次評(píng)論時(shí)填寫(xiě)評(píng)論者資料的 div 將會(huì)隱藏，當(dāng)用戶(hù)點(diǎn)擊“ Change ”時(shí)可以再次編輯評(píng)論者資料，同時(shí) Change 字樣會(huì)改為“ Finish ” ，點(diǎn)擊 Finish 時(shí)填寫(xiě)評(píng)論者資料的 div 將會(huì)再次隱藏，同時(shí) Change 字樣將會(huì)改為 Change Again 。
以下是分步敘述如何使用 jQuery 實(shí)現(xiàn)以上效果，如果只想實(shí)現(xiàn)效果的童鞋可以直接看代碼。
1.加載 jQuery 庫(kù)，這是必須的。
2.把 comments.php 的評(píng)論者資料框代碼和評(píng)論框代碼按如下修改：
<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) : ?> <div class="commentwelcome"> <?php printf(__('歡迎發(fā)表評(píng)論! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" title="重新填寫(xiě)資料" href="javascript:void(0);"><span>Change</span></a> </div><?php endif; ?> <div class="<?php echo $comment_author_email ? 'hidden' : 'profile'; ?>"> <!-- 評(píng)論者資料框代碼 --></div> <!-- 評(píng)論框代碼 -->
在上面的代碼中，會(huì)以 cookie 的方式記錄評(píng)論者資料，并把評(píng)論者資料框的 div 賦予“ hidden ”的 class ，因此對(duì)于曾評(píng)論的訪客，需要先隱藏起評(píng)論者資料框的 div ，可以使用 jQuery 的hide()事件隱藏該 div ，如果 jQuery 加載速度較慢，會(huì)出現(xiàn)打開(kāi)頁(yè)面時(shí)先出現(xiàn) div ，片刻后再突然隱藏 div 的情況，這樣顯然不利用戶(hù)體驗(yàn)，因此也可以直接寫(xiě)一條 css ――.hidden {display: none; }。
$('.hidden').hide();3.然后再使用toggle()事件，slideUp()和slideDown()動(dòng)畫(huà)實(shí)現(xiàn)編輯評(píng)論者資料的功能。
$('#edit_profile').toggle(function(){ $('.hidden').slideDown(); },function(){ $('.hidden').slideUp(); });
4.為了提高用戶(hù)體驗(yàn)，還需要使用text()方法在點(diǎn)擊“Change”時(shí)把 Change 的字樣改為“ Finish ”，當(dāng)點(diǎn)擊 Finish 時(shí)再把 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：訪客評(píng)論顯示歡迎信息
我們通過(guò)判斷$comment_author變量值是否為空，來(lái)確定訪客是否在近期有評(píng)論（有 Cookie）。
if (!is_user_logged_in() && !empty($comment_author)) {...}如果有，則在評(píng)論框上方顯示歡迎信息：
if (!is_user_logged_in() && !empty($comment_author)) { $welcome_login = '<p id="welcome-login"><span>歡迎回來(lái), <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)用之前。
接下來(lái)，我們通過(guò) Javascript 來(lái)實(shí)現(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('隱藏'); } }); }); 這樣，如果用戶(hù)需要更新信息時(shí)，可以點(diǎn)擊歡迎信息右側(cè)的更改按鈕；修改完成之后，用戶(hù)信息會(huì)在評(píng)論后更新。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
