js实现为a标签添加事件的方法(使用闭包循环)


Posted in Javascript onAugust 02, 2016

本文实例讲述了js实现为a标签添加事件的方法。分享给大家供大家参考,具体如下:

以示例说明:

实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1。

Html结构如下所示:

<ul>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">200</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">300</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">400</span></a></li>
</ul>

JS实现代码:

function addPraiseNum() {
  var praiseObjs = document.getElementsByClassName('ml-praise');
  for (var i = 0; i < praiseObjs.length; i++) {
 var praiseObj = praiseObjs[i];
 praiseObj.onclick = (function (dingObj) {
   return function () {
 dingObj.innerHTML = parseInt(dingObj.innerHTML) + 1;
   };
 })(praiseObj.getElementsByClassName('ding-num')[0]);
  }
}

实现效果如下:

js实现为a标签添加事件的方法(使用闭包循环)

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 #Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 #Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 #Javascript
实现React单页应用的方法详解
Aug 02 #Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 #Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 #Javascript
AngularJS ng-mousedown 指令
Aug 02 #Javascript
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
应届毕业生个人自荐信范文
2013/11/30 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
大学班级文化建设方案
2014/05/06 职场文书
人事任命书范文
2014/06/04 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
销售代理协议书
2014/09/30 职场文书
仓管员岗位职责
2015/02/03 职场文书
美术教师个人总结
2015/02/06 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang