使用原生js,addEventlistener,给每个li元素都绑定一个click事件输出他们的顺序

最新推荐文章于 2022-03-08 15:35:24 发布

Eli-sun

最新推荐文章于 2022-03-08 15:35:24 发布

阅读量1k

点赞数 1

文章标签： javascript css

本文链接：https://blog.csdn.net/vfjcgg/article/details/104679829

版权

		<ul>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
        </ul>

使用原生js,addEventlistener,给每个li元素都绑定一个click事件输出他们的顺序

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul {
        list-style: none;
    }
    
    li:nth-of-type(2n) {
        background-color: red;
    }
    
    li:nth-of-type(2n-1) {
        background-color: green;
    }
</style>
</head>

<body>
<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
	
     
<script>
    var liCollection = document.getElementsByTagName('li');
    for (var i = 0; i < liCollection.length; i++) {
        (function(j) {
            liCollection[j].onclick = function() {
                console.log(j);

            }
        }(i));
    }
</script>
</body>

</html>

Eli-sun

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用原生js,addEventlistener,给每个li元素都绑定一个click事件输出他们的顺序

<ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul>使用原生js,addEventlistener,给每...
复制链接

扫一扫