jQueryページコメント欄における訪問者情報の自動記入機能を実現する方法

まず簡単にログインの具体的な操作を説明すると、ユーザーが初めてログインしたときにコメント者の資料を記入するためのボックスが表示され、ユーザーのコメントが完了すると、コメント者の資料をクッキーで記録し、1年後にはクッキーが自動的に消去され、ユーザーが再びコメントしたときにコメント者の資料を記入するdivが隠されます.ユーザーが「Change」をクリックすると、コメント者の資料を再度編集することができ、同時にChangeの文字が「Finish」に変更され、Finishをクリックするとコメント者の資料を記入するdivが再び非表示になり、同時にChangeの文字がChange Againに変更されます.
以下では,jQueryを用いて以上の効果を実現する方法をステップ別に述べ,効果を実現したいだけの子供靴はコードを直接見ることができる.
1.jQueryライブラリをロードする必要があります.
2.comments.phpのコメントボックスコードとコメントボックスコードは、以下のように変更されます.

  

  %1s '), $comment_author); ?>Change
  

 
      
   
    

上のコードでは、コメント者の資料をクッキーで記録し、コメント者の資料ボックスの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 = '
    , ' . $comment_author . '.';
  $welcome_login .= '    
';

  $comments_args['comment_field'] = '

' . $comments_args['comment_field'];
$comments_args['comment_notes_before'] = $welcome_login . '';
}
以上のコードは、トピックの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('  ');
    }  
  }); 
}); 

このように、ユーザが情報を更新する必要がある場合、ウェルカム情報の右側の変更ボタンをクリックすることができる.変更が完了すると、ユーザー情報はコメント後に更新されます.