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 设计模式学习 Singleton
Jul 27 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery选择器基础入门教程
May 10 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JS实现留言板功能
Jun 17 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
js实现小星星游戏
Mar 23 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 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
javascript 写类方式之四
2009/07/05 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
Vue实现简易计算器
2020/02/25 Javascript
Python新手们容易犯的几个错误总结
2017/04/01 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python实现五子棋人机对战游戏
2020/03/25 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
利用python开发app实战的方法
2019/07/09 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python爬虫基础知识点整理
2020/06/02 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
专业技术职务聘任书
2014/03/29 职场文书
公司聚餐通知
2015/04/22 职场文书
政审证明材料
2015/06/19 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL