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 相关文章推荐
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
Javascript调用C#代码
Jan 17 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
浅析javascript 定时器
Dec 23 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 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
正则表达式语法
2006/10/09 Javascript
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php中几种常见安全设置详解
2010/04/06 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
用javascript实现画板的代码
2007/09/05 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
javascript数组排序汇总
2015/07/07 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python实现从wind导入数据
2019/12/03 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
工作时间上网检讨书
2014/02/03 职场文书
政府信息公开实施方案
2014/05/09 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python