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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
jquery分页对象使用示例
Apr 01 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 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网页病毒清除类
2014/12/08 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
一段实时更新的时间代码
2006/07/07 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
Js apply方法详解
2017/02/16 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
英文简历中的自荐信范文
2013/12/14 职场文书
销售人员获奖感言
2014/02/05 职场文书
六一节目主持词
2014/04/01 职场文书
企业人事任命书
2014/06/05 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
小平您好观后感
2015/06/09 职场文书
贷款担保书范本
2015/09/22 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python