使用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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
js有序数组的连接问题
Oct 01 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
Koa代理Http请求的示例代码
Oct 10 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程序员的13个好习惯小结
2012/02/20 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php 数组元素快速去重
2017/05/05 PHP
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Python 文件和输入输出小结
2013/10/09 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
python 递归相关知识总结
2021/03/03 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
实习自荐信
2013/10/13 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
关于教师节的广播稿
2014/09/10 职场文书
党员个人自我评价
2015/03/03 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python