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

作者: JONE 分类: PHPer 发布时间: 2017-09-14 19:29

<!DOCTYPE html>
<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

javascript 闭包