點擊每一項alert出對應的索引號

時間 2019-12-25

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>點擊每一項alert出對應的索引號</title>
</head>
<body>
<ul id="test">
    <li>這是第一條</li>
    <li>這是第二條</li>
    <li>這是第三條</li>
</ul>
</body>
<script type="text/javascript">
    /**
     *原理，用不一樣的方法記錄每次循環的i的值
     * */
    window.onload=function(){
        var oUl=document.getElementById("test");
       var oLi=oUl.getElementsByTagName("li");
        /*start one+++++++++用閉包的方法實現*/
        for(var i=0;i<oLi.length;i++){
            (function(i){
                oLi[i].onclick=function(){
                    alert(i);
                    console.log(i);
                }
            }(i));
        }
        /*end one*/
        /*start two+++++++++++用事件委託的方法實現  此方法在chrome瀏覽器下使用，沒寫兼容其餘瀏覽器的事件*/
//        oUl.addEventListener("click",function(e){
//            for(var i=0;i<oLi.length;i++){
//                oLi[i].index = i;//索引號
//            }
//            alert(e.target.index);
//        },false);
        /*end two*/
    }
</script>
</html>

相關標籤/搜索