关于JS函数闭包的一个小案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul > li {
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
<script>
     window.onload = function () {
        var list = document.getElementById('list');
        var listLi = list.getElementsByTagName('li');

        for(var i = 0; i < listLi.length; i++){
            listLi[i].onclick = (function(){
                var rowNum=i;
                return function(){
                    alert(rowNum);
                }
            })();
        }
    }
</script>

<ul id="list">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

想要的效果就是点击对应的li元素就可以对对应的元素执行alert(rowNum)操作
效果如如下,点击第6个<li>即弹出6


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,043评论 25 709
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,506评论 0 66
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,377评论 2 17
  • 云从山峦起, 风向涧峡无。 碎雨虬折路, 阴晴众壑殊。
    兔子的午觉阅读 1,423评论 0 0
  • 很多人都会遇到电脑越用越卡、桌面出现各种奇怪的图标以及软件,而自己压根就没有安装这些软件...根据以往的经验,可以...
    挽弦暮笙Wan阅读 16,016评论 3 5