js中嵌套for循环this指向问题-求解答？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <style>

        li {
            list-style-type: none;
        }
        
        ul li {
            width: 300px;
            height: 20px;
            border: 1px solid #663333;
            margin-bottom: 5px;
            text-align: center;
        }

        #div1 {
            width: 300px;
            height: 100px;
            margin-left: 40px;
            border: 1px solid rebeccapurple;
        }

        #div2 {
            width: 150px;
            height: 100px;
            background-color: #954b4b;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            color: white;
            display: none;
        }

    </style>

</head>
<body>
<div id="qq_talk_seach_head">
    <span></span>
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<div id="div1">
    <div id="div2"></div>
</div>


<script>
    window.onload = function () {
        var ul_li = document.getElementsByTagName('li');
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');

        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                //alert(obj.currentStyle[attr]);
                return obj.currentStyle[attr];
            }
            else {
                return getComputedStyle(obj, false)[attr];
            }
        }//
       

               for (var i = 0; i < ul_li.length; i++) {
                            ul_li[i].index = i;
                            ul_li[i].onclick = function () {
                if (getStyle(div2, 'display') === 'none') {
                    div2.style.display = 'block';
                }
                //debugger;
                if (!this.getAttribute('index')) {
                    this.setAttribute('index', this.index);
                    var new_span = document.createElement('span');
                    var new_span_text = document.createTextNode(ul_li[this.index].innerHTML);
                    div2.appendChild(new_span);
                    new_span.appendChild(new_span_text);
                    new_span.className = 'span_class';
                }
                var t_lenght = document.getElementsByClassName('span_class');
                for (var j = 0; j < t_lenght.length; j++) {
                    t_lenght[j].style.display = 'none';
                }
                t_lenght[this.index].style.display = 'block';
                console.log(t_lenght.length);
            }
        }

        div2.onclick = function () {
            if (getStyle(div2, 'display') === 'block') {
                div2.style.display = 'none';
            }
        }
 }
</script>
</body>
</html>
youngfever
浏览 1264回答 1
1回答

随时随地看视频慕课网APP