javascript - 循环遍历为什么需要将 i 再记录一遍？

问题描述

问 题

js代码如下：

window.onload = function() {
        var menu = document.getElementById('menu'),
            ps = menu.getElementsByTagName('p'),
            uls = menu.getElementsByTagName('ul');
        for (var i = 0; i < ps.length; i++) {
            ps[i].id = i;  //为什么这里需要将 i 再记录一遍？
            ps[i].onclick = function() {
                uls[this.id].style.display = "block"; //这里直接写usl[i].style.display="block" 为什么不行？它们不是同一个i吗？
            };
        }
    };

html代码如下：

<div class="menu" id="menu">
    <div>
        <p>Web前端</p>
        <ul style="display:block">
            <li>JavaScript</li>
            <li>DIV+CSS</li>
            <li>jQuery</li>
        </ul>
    </div>
    <div>
        <p>后台脚本</p>
        <ul>
            <li>PHP</li>
            <li>ASP.net</li>
            <li>JSP</li>
        </ul>
    </div>
    <div>
        <p>前端框架</p>
        <ul>
            <li>Extjs</li>
            <li>Esspress</li>
            <li>YUI</li>
        </ul>
    </div>
 </div>

解决方案

因为onClick不是立即执行的，实际上当事件处理函数执行时，这里如果使用i的话会引用同一个i，而且这个i值等于for循环结束时i的值。

实际上这里起的效果跟闭包是一样的，具体效果是让每一个事件处理函数都有属于它自身的i值，而不是引用同一个i。

这篇关于javascript - 循环遍历为什么需要将 i 再记录一遍？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！