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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JS常用函数使用指南
Nov 23 Javascript
详解JavaScript对象类型
Jun 16 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python流程控制语句的深入讲解
2020/06/15 Python
python可以用哪些数据库
2020/06/22 Python
python list的index()和find()的实现
2020/11/16 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python