js实现为a标签添加事件的方法(使用闭包循环)
更新时间：2016年08月02日 11:08:52 作者：Quber
这篇文章主要介绍了js实现为a标签添加事件的方法,基于闭包循环实现事件添加的功能,涉及javascript闭包与事件操作相关技巧,需要的朋友可以参考下
本文实例讲述了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]);
}
}
实现效果如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
javascript模拟git diff命令实现文本文件差异比较
这篇文章主要为大家详细介绍了javascript如何模拟git diff命令实现文本文件差异比较效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2023-12-12
最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下2024-01-01
本文主要介绍了原生javascript上传图片带进度条的实例详解。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
关键词高亮在开发中会带来很多的方便，关键词高亮包括:根据ID高亮关键字/根据Tag名高亮关键字等等，感兴趣的朋友可以了解下，希望本文对你有所帮助2013-01-01
本文主要介绍了VSCode开发TypeScript的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
JS下载文件的实现在网上可以找到很多教程，不过本文为大家介绍的是无刷新下载文件，貌似更酷一点是吧2014-04-04
这篇文章主要介绍了weui中的picker使用js进行动态绑定数据问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
从层次上来看，对象的复制可以简单地分为浅复制和深复制，顾名思义，浅复制是指只复制一层对象的属性，不会复制对象中的对象的属性，对象的深复制会复制对象中层层嵌套的对象的属性。本文是我在复制对象方面的一些心得总结，由浅复制到深复制，感兴趣的朋友一起学习吧2017-03-03
这篇文章主要介绍了JavaScript实现强制重定向至HTTPS页面,本文讲解如何用JS实现HTTP重定向HTTPS或者HTTPS跳转到HTTP,需要的朋友可以参考下2015-06-06
本篇文章主要介绍了canvas简单快速实现知乎登录页背景效果的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
最新评论