使用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 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
通过实践编写优雅的JavaScript代码
May 30 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
python如何判断IP地址合法性
2020/04/05 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
工程总经理工作职责
2013/12/09 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书