成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

首先簡(jiǎn)單說(shuō)一說(shuō)仿登陸的具體操作，用戶第一次登陸時(shí)會(huì)出現(xiàn)用于填寫(xiě)評(píng)論者資料的框，當(dāng)用戶評(píng)論完成后，將會(huì)以 cookie 的方式記錄評(píng)論者資料，一年后 cookie 自動(dòng)清除，當(dāng)用戶再次評(píng)論時(shí)填寫(xiě)評(píng)論者資料的 div 將會(huì)隱藏，當(dāng)用戶點(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 的情況，這樣顯然不利用戶體驗(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.為了提高用戶體驗(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('隱藏');
    }  
  }); 
}); 

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