js 高级排它思想

最新推荐文章于 2024-05-05 16:12:15 发布

web修理工

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量165

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/106443258

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1 <span>11</span></li>
        <li>2 <span>22</span></li>
        <li>3 <span>33</span></li>
        <li>4 <span>44</span></li>
    </ul>
    <script>
        var list = document.getElementsByTagName('li')
        var span = document.getElementsByTagName('span')

        //  (时间复杂度>空间复杂度)
        //并不是太快了 而是引用类型 后面覆盖前面 生成块级作用域
        for (var i = 0; i < list.length; i++) {
            // 方法三
            // for (let i = 0; i < list.length; i++) {
            //     list[i].onclick = function (e) {
            //         for (var j = 0; j < list.length; j++) {
            //             list[j].style.color = "#000";
            //             span[j].style.color = '#000'
            //         }
            //         // this.style.color = "#f00"//this指向该元素
            //         list[i].style.color = "#f00"
            //         span[i].style.color = '#ff0'
            //     }

            // 方法二
            // (function (k) {
            //     list[k].onclick = function (e) {
            //         for (var j = 0; j < list.length; j++) {
            //             list[j].style.color = "#000";
            //             span[j].style.color = '#000'
            //         }
            //         // this.style.color = "#f00"//this指向该元素
            //         list[k].style.color = "#f00"
            //         span[k].style.color = '#ff0'
            //     }
            // })(i)

            // 方法一
            // list[i].index = i
            // list[i].onclick = function (e) {
            //     for (var j = 0; j < list.length; j++) {
            //         list[j].style.color = "#000";
            //         span[j].style.color = '#000'
            //     }
            //     // console.log(k)
            //     // this.style.color = "#f00"//this指向该元素
            //     this.style.color = "#f00"
            //     span[this.index].style.color = '#ff0'

            // }

        }

        //  (时间复杂度<空间复杂度)
        var index = 0
        // for (let i = 0; i < list.length; i++) {
        for (var i = 0; i < list.length; i++) {

            // 方法一
            //     list[i].onclick = function (e) {
            //     list[index].style.color = '#000'
            //     this.style.color = '#f00'
            //     index = i
            // }

            // 方法二
            list[i].index = i
            list[i].onclick = function (e) {
                list[index].style.color = '#000'
                this.style.color = '#f00'
                index = this.index
            }

        }


    </script>
</body>

</html>