点击一个列表时，输出对应的索引

最新推荐文章于 2022-10-20 19:29:19 发布

Lovely Ruby

最新推荐文章于 2022-10-20 19:29:19 发布

阅读量724

点赞数 1

分类专栏： # 问题

本文链接：https://blog.csdn.net/u010263423/article/details/102740606

版权

问题专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

问题：点击哪个 li，就弹出它的下标

问题：点击哪个 li，就弹出它的下标

准备

给 body 添加几个 li

<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
</body>
<script>
	var li = document.querySelectorAll("li");
    var ul = document.querySelector("ul");
</script>

解决方法一：事件委托 * + indexOf

思想：冒泡机制，通过点击子元素，来触发父元素的监听事件
li是个伪数组，把数组的方法给li，然后通过 target 找li数组中的下标

<script>
    /*给 ul 	添加一个事件委托  */
    ul.addEventListener("click",function(e){
        var target = e.target;
        if(target.nodeName.toLowerCase() === "li"){
            console.log(Array.prototype.indexOf.call(li,target));
        }
    },false);
    
</script>

	var ul = document.querySelector("ul");
    var lis = document.querySelectorAll("li");
    ul.onclick = function (e) {
        //先找点击了谁
        var tar = e.target;

        //然后转成数组
        var arr = Array.from(lis);

        //最后输出索引
        console.log(arr.indexOf(tar));
    };

解决方法二：外部嵌套自调用函数

for (var i = 0, len = li.length; i < len; i++) {
        (function (i) {
        	//注意这儿的参数不要加i
            li[i].onclick = function () {
                console.log(i);
            };
        })(i);
    }

解决方法三：let（es6）

for (let i = 0, len = li.length; i < len; i++) {
        li[i].onclick = function () {
            console.log(i);
        };
    }

引申注意点

每个函数都是有 return 的，没有写的话就是 return;

Lovely Ruby

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击一个列表时，输出对应的索引

文章目录问题：点击哪个 li，就弹出它的下标准备解决方法一：事件委托 *解决方法二：外部嵌套自调用函数解决方法三：let（es6）引申注意点问题：点击哪个 li，就弹出它的下标准备给 body 添加几个 li<body> <ul> <li>一</li> <li>二</li> ...
复制链接

扫一扫

专栏目录