首页 > 其他 > 详细

点击一个Ul里面的5个li,分别弹出他们的序号

时间:2019-06-01 21:02:13      阅读:67      评论:0      收藏:0      [点我收藏+]

方法一:

var oLi = document.querySelector("li");
for(var i=0; i<oLis.length; i++){
    oLis[i].onclick = (function(j){
        return function(){
            alert(j);
        }
    })(i);
}

方法二:

var oLi = document.querySelector("li");
for(var i=0; i<oLi.length; i++){
    (function(j){
        oLi[j].onclick = function(){
            alert(j);
        };
    })(i);
}

 方法三:

var oLi = document.getElementsByTagName(‘li‘);
    function func(obj,i){
        obj.onclick = function(){
            alert (i);
        }
    }
    for(var i = 0; i<oLi.length; i++){
        func(oLi[i], i);
    }

 

方法四:

var oLi = document.getElementsByTagName(‘li‘);
for(var i=0; i<oLi.length; i++){
    oLi[i].setAttribute("onclick", "alert("+i+");");
}

 

方法五:

for(var i=0; i<oLi.length; i++){
    oLi[i].index = i;
    oLi[i].onclick = function(){
        alert(this.index);
    }
}

 方法六:

<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (let i = 0; i < 3; i++) {
            btns[i].onclick = function () {
                console.log("我是第" + (i) + "个按钮");
            };
        }
    </script>
</body>

 

点击一个Ul里面的5个li,分别弹出他们的序号

原文:https://www.cnblogs.com/haohao-a/p/10960848.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!