關(guān)于JS函數(shù)閉包的一個小案例

<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>

想要的效果就是點擊對應(yīng)的li元素就可以對對應(yīng)的元素執(zhí)行alert(rowNum)操作
效果如如下,點擊第6個<li>即彈出6


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,036評論 25 709
  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個獨立的組件,根...
    凜0_0閱讀 5,315評論 0 66
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,130評論 2 17
  • 云從山巒起, 風(fēng)向澗峽無。 碎雨虬折路, 陰晴眾壑殊。
    兔子的午覺閱讀 242評論 0 0
  • 很多人都會遇到電腦越用越卡、桌面出現(xiàn)各種奇怪的圖標以及軟件,而自己壓根就沒有安裝這些軟件...根據(jù)以往的經(jīng)驗,可以...
    挽弦暮笙Wan閱讀 16,124評論 3 5

友情鏈接更多精彩內(nèi)容