jQuery實(shí)現(xiàn)頁(yè)面評(píng)論欄中訪客信息自動(dòng)填寫(xiě)功能的方法
來(lái)源:易賢網(wǎng) 閱讀:860 次 日期:2016-06-25 11:26:40
溫馨提示:易賢網(wǎng)小編為您整理了“jQuery實(shí)現(xiàn)頁(yè)面評(píng)論欄中訪客信息自動(dòng)填寫(xiě)功能的方法”,方便廣大網(wǎng)友查閱!

訪客信息自動(dòng)填寫(xiě)即是利用cookie來(lái)記錄訪客第一次評(píng)論時(shí)填寫(xiě)的信息,這樣以后再評(píng)論時(shí)實(shí)現(xiàn)一個(gè)自動(dòng)填寫(xiě),這里我們以WordPress為例展示jQuery實(shí)現(xiàn)頁(yè)面評(píng)論欄中訪客信息自動(dòng)填寫(xiě)功能的方法:

首先簡(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)論后更新。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)