使用jQuery实现WordPress中的Ctrl+Enter和@评论回复


Posted in Javascript onMay 21, 2016

添加 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 中。或许上面的描述较难理解,下面再用图片说明一下!

要获取用户 id ,首先需要了解评论部分的 DOM 结构,以 Melody 为例,用 Firebug 查看其一条评论的部分 HTML ,

使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

看了图相信童鞋们应该大概明白了, .comment-reply-link 的上两级父元素包含回复者的 id ,因此可以在这里获取回复者的id,而在 .comment-reply-link 的同辈元素中包含了用户的昵称,看到这里相信各位童鞋再看看上面的 jQuery 代码应该不难理解了!

我们首先应该知道自己的评论模板在哪里有输出回复者的 id ,在哪里有输出回复者的昵称,然后用 jQuery 的选择器即可以获取相关的数据。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
You might like
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP strripos函数用法总结
2019/02/11 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue组件创建和传值的方法
2018/08/17 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue全局使用axios的方法实例详解
2018/11/22 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python3 操作符重载方法示例
2017/11/23 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python全排列操作实例分析
2018/07/24 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python里 super类的工作原理详解
2019/06/19 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
技校生自我鉴定范文
2013/09/26 职场文书
求职信写作要突出重点
2014/01/01 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
法定代表人证明书
2014/11/28 职场文书
党员个人自我评价
2015/03/03 职场文书
撤诉书怎么写
2015/05/19 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记