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

Posted haohao-a

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击一个Ul里面的5个li,分别弹出他们的序号相关的知识,希望对你有一定的参考价值。

方法一:

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,分别弹出他们的序号的主要内容,如果未能解决你的问题,请参考以下文章

Js面试题--js点击弹出对应序号

li点击弹出序号

ul ol li的序号编号样式

急!CSS中,怎么让ul li中的图片和文字横向水平居中

遍历ul下的li,点击弹出li的索引

怎么用JQuery的each函数循环去掉一个ul里面li的样式