JavaScript【排他思想及其优化】

最新推荐文章于 2024-09-03 16:07:32 发布

前端林俊杰

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量168

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/LuShanGuoQiLin/article/details/126411048

版权

本文探讨了如何优化HTML按钮点击事件处理的JavaScript代码，通过比较使用双层for循环与移除内部循环的方法，展示了如何更高效地切换按钮的粉色背景效果。优化后的代码减少了不必要的遍历，提高了性能。

摘要由CSDN通过智能技术生成

优化前：使用双层for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        // 1.获取元素
        let btn = document.querySelectorAll('button')
        for (let i = 0; i < btn.length; i++) {
     
          btn[i].addEventListener('click', () => {
                for (let j = 0; j < btn.length; j++) {
                     //干掉所有人
                 btn[j].classList.remove('pink'); 
                }
                
            
            //留下我自己
            btn[i].classList.add('pink');
          })
            
        }
    </script>
</body>
</html>

优化后：去掉内部for循环，在五个按钮中增添一个pink类名，找出唯一一个有pink类的，去掉这个类名，再重新给按钮添加上pink类名的即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="pink">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        // 1.获取元素
        let btn = document.querySelectorAll('button')
        for (let i = 0; i < btn.length; i++) {
           
          btn[i].addEventListener('click', () => {
      
            //找出唯一一个有pink类的
            document.querySelector('.pink').classList.remove('pink');
            //给自己再添加上pink类
            btn[i].classList.add('pink');
          })
            
        }
    </script>
</body>
</html>