JavaScript中for 循环的onclick事件

最新推荐文章于 2022-06-22 17:52:48 发布

oh panda

最新推荐文章于 2022-06-22 17:52:48 发布

阅读量737

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/aha_xigua/article/details/112797246

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type='text/css'>
        .active {
            color: rgb(189, 55, 55);
        }
    </style>
</head>
<body>
    <ul>
        <li class='a'>a</li>
        <li class='b'>b</li>
        <li class='c'>c</li>
    </ul>
    <script type='text/javascript'>
        var Li = document.querySelectorAll('li');
        for (var i = 0; i < Li.length; i++) {
            Li[i].onclick = function() {
                for (var i = 0; i < Li.length; i++) {
                    Li[i].className = '';
                }
                this.className = 'active';
            }
        }
    </script>
</body>
</html>

最开始看for循环里面的onclick代码时，我百思不得其解，为什么点击相应的li时，颜色会改变，后来才知道原来是运行for循环里面的onclick代码时，对每个li都产生了一个监听，只要我们一点击，那么就会执行function函数，改变颜色
在这里插入图片描述

oh panda

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中for 循环的onclick事件

JavaScript：for 循环的onclick事件代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st
复制链接

扫一扫