使用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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
VSCode搭建React Native环境
May 07 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
PHPEXCEL 使用小记
2013/01/06 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php数组合并的二种方法
2014/03/21 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
理解javascript对象继承
2016/04/17 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python二元表达式用法
2019/12/04 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python爬取音频下载的示例代码
2020/10/19 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
经济职业学院毕业生自荐书
2014/03/17 职场文书
保险公司开门红口号
2014/06/21 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers