使用jQuery實現WordPress中的Ctrl+Enter和@評論回復

2019-11-20 09:58:32

字體：大中小

來源：轉載

供稿：網友

添加 Ctrl+Enter 快捷回復
這里送上兩種方法，首先是 jQuery 方法，前段時間一直在研究 jQuery ，因此對 jQuery 方法比較熟悉，如果你的主題本來已經加載 jQuery 庫，建議你使用下面的方法。

把這段代碼加入 js 文件中，如果你已經加載 jQuery ，現在就可以使用 Ctrl+Enter 進行快捷回復。

jQuery(document).ready(function($){          //Ctrl+Enter回復  jQuery(document).keypress(function(e){    if(e.ctrlKey && e.which == 13 || e.which == 10) {      jQuery("#commentform").submit();    }  })});

解釋一下代碼，在 chrome 等現代瀏覽器中， js 是使用 e.which ==13 判斷 Enter ，在 ie6 中， js 是使用 e.which ==10 判斷 Enter 。

另一種方法：
在 comments.php 中找到一段類似以下代碼（即評論框的代碼），

<textarea name="comment" id="comment" rows="10" cols="50" tabindex="4"></textarea>

替換為以下的一段代碼：

<textarea name="comment" id="comment" rows="10"?cols="50"?tabindex="4" onkeydown="if(event.ctrlKey&&event.keyCode==13 || Key&&event.keyCode==10){document.getElementById('submit').click();return false};"></textarea>

實現 Ctrl+Enter 快捷回復的原理跟 jQuery 版的差不多，這里就不作詳細解釋了。

實現 @回復
在回復時帶有“ @ ”的功能大家應該不陌生了，在微博， BBS 中都可以見到“ @ ”的身影，連騰訊的 Qzone 也加入了“ @回復 ”的功能。的確，“ @回復 ”使到回復的對象更加清晰了，對于多重回復效果更加明顯。

但是， WordPress 的評論模板中并沒有自帶這個功能，因此我們需要手動添加進去，其實這個功能在 WordPress 中已經比較流行了，不少主題中都帶有這個功能，實現的原理也有多種，而我在本文中介紹的是 jQuery 實現的方法，由于網上流傳的文章大多都是直接給出 jQuery 代碼，沒有詳細的解釋，而不同的網站 DOM 不一定相同，因此不熟悉 jQuery 的童鞋在使用 jQuery 實現“ @回復 ”時可能會出現各種問題。

1.加載 jQuery 庫，可以直接用 google 的。

2. jQuery 代碼，可以直接放到 js 文件中。

jQuery(document).ready(function($){$('.comment-reply-link').click(function() {   //獲取回復者的id   var atid = '"#' + $(this).parent().parent().attr("id") + '"';   //獲取回復者的昵稱  var atname = $(this).parent().find('.comment_author').text();$("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus();});$('#cancel-comment-reply a').click(function() {$("#comment").attr("value",'');});});

3.解釋 jQuery 代碼

在實現“ @回復 ”中，關鍵是獲取所要回復的對象的 id 和昵稱，因此定義了兩個量 atid ， atname ，分別用于保存所要回復的對象的 id 和昵稱。當用戶用鼠標單擊 .comment-reply-link 后jQuery會獲取其上兩級父元素的 id 屬性，保存在量 atid 中，然后在其父元素的子輩元素中尋找 .comment_author ，并獲取其內容保存在 atname 中?；蛟S上面的描述較難理解，下面再用圖片說明一下！

要獲取用戶 id ，首先需要了解評論部分的 DOM 結構，以 Melody 為例，用 Firebug 查看其一條評論的部分 HTML ，

2016521112857945.png (383×166)