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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
Node.js事件驱动
Jun 18 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
node中IO以及定时器优先级详解
May 10 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
详解node和ES6的模块导出与导入
Feb 19 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遍历二维数组的代码
2011/04/22 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
发现的以前不知道的函数
2006/09/19 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
javascript控制台详解
2015/06/25 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python isinstance函数用法详解
2020/02/13 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
教师自查自纠材料
2014/10/14 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
预备党员半年考察意见
2015/06/01 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL