jquery implements the method of automatic filling of visitor information in the page comment column _jquery

First of all, simple to say that the specific operation of the landing, user first landing will be used to fill in the box reviewer information, when the user comments completed, will be a cookie to record the reviewer information, a year after the cookie automatically cleared, when the user again comments fill in the reviewer information Div will be hidden, When the user clicks "Change" can edit the reviewer material again, at the same time change typeface will be changed to "Finish", click Finish when fill in reviewer material of Div will be hidden again, change typeface will be changed Again.

Here is a step-by-step description of how to use JQuery to achieve the above effect, if only want to achieve the effect of the child shoes can look directly at the code.

1. Loading the JQuery library is a must.

2. Revise the comments.php's Reviewer Data box code and Comment box code as follows:

<?php if (isset ($_cookie[' Comment_author_email_ '). Cookiehash] && isset ($_cookie[' comment_author_ '). Cookiehash]):?>
  <div class= "Commentwelcome" >
  <?php printf (' Welcome to comment! <strong>%1s</ Strong> '), $comment _author);? ><a id= "Edit_profile" title= "re-fill in the information" href= "javascript:void (0);" ><span>Change</span></a>
  </div>
<?php endif?>
 
<div class= " php echo $comment _author_email? ' Hidden ': ' Profile ';?> ' >      
   <!--reviewer Box code-->
</div>    
<!--comment Box code-->

In the code above, the reviewer's data is recorded as a cookie, and the div of the reviewer's box is given the class of "hidden", so for visitors who have commented, you need to hide the div of the reviewer's data box to hide the div with the Hide () event of JQuery. , if the JQuery loading speed is slow, will appear when the page opens first Div, a moment later then suddenly hide div situation, so obviously unfavorable user experience, so can also write a CSS ——. hidden {display:none;}.

$ ('. Hidden '). Hide ();

3. Then use the toggle () event, Slideup () and Slidedown () animation to realize the function of editing reviewer data.

$ (' #edit_profile '). Toggle (function () {
    $ ('. Hidden '). Slidedown ();
    },function () {
    $ ('. Hidden '). Slideup ();
    });

4. In order to improve the user experience, you will also need to use the text () method to change the word "Finish" when you click "Change", and then replace the word "changing Again" when you click Finish. To integrate the above code, complete the JQuery code as follows:

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: Visitor Reviews Show Welcome information
we determine whether a visitor has a recent comment (with a Cookie) by determining whether the value of the $comment_author variable is empty.

if (!is_user_logged_in () &&!empty ($comment _author)) {
...
}

If so, the welcome message is displayed above the comment box:

if (!is_user_logged_in () &&!empty ($comment _author)) {
  $welcome _login = ' <p id= ' Welcome-login ' >< Span> Welcome back, <strong> '. $comment _author. ' </strong>.</span> ';
  $welcome _login. = ' <span id= ' toggle-author ' ><u> change </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 ' > ';
}

The above code needs to be added to the topic before the comment.php file Comment_form ($comments _args) method call.

Next, we use Javascript to implement guest information changes:

/* Toggle Comment User *
/$ (' #comments '). On (' Click ', ' #toggle-author ', function () { 
  $ (' #author-info '). Slidetoggle (function () { 
    if ($ (). Is (': Hidden ')) {/
      * Update author name in the Welcome messages
      /$ (' #we Lcome-login strong '). HTML ($ (' #author '). Val ());

      /* Update the Toggle action name *
      /$ (' #toggle-author u '). html (' change ');
    } else {/
      * Update the Toggle action Nam E
      /$ (' #toggle-author u '). html (' hidden ');
    }  
  } 
); 

This way, if the user needs to update the information, they can click on the Change button to the right of the welcome information, and after the modification is complete, the user information will be updated after the comment.