CSS + JavaScript 使用循环语句为节点添加动作时出现的错误

做了一个简陋的标签页，但是使用循环为每个标签头添加动作的时候，不按照我的想法工作。
原本是想在鼠标经过每个标签头的时候，下面的内容自动切换。
代码如下：

<!DOCTYPE html>
<html>
    <head>
    <title>tabLabel</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        * {
        margin: 0; border: 0; padding: 0;
        }
        .list {
        width: 300px; height: 50px;
        }
        .list > ul {
        list-style: none;
        }
        .list > ul > li {
        display: inline-block;
        width: 100px; height: 50px;
        background: #999;
        }
        .pad {
        width: 300px; height: 250px;
        }
        .pad > ul {
        list-style: none;
        }
        .pad > ul > li {
        display: none;
        width: 300px; height: 250px;
        z-index: 5;
        background: #f00;
        }
    </style>
    <script type="text/javascript">
        function loading() {
        var list = document.getElementsByClassName('list')[0];
        var unshowed = list.getElementsByTagName('li');
        // 问题出现在这里，循环变量i是3，而不是0,1,2
        for(var i = 0; i < unshowed.length; i++) {
            unshowed[i].onmouseover = function() {showThis(i);};
        }
        // 但是使用这样的方法添加动作，就能正常运行
        //unshowed[0].onmouseover = function() { showThis(0);};
        //unshowed[1].onmouseover = function() { showThis(1);};
        //unshowed[2].onmouseover = function() { showThis(2);};
        };
        
        function showThis(showedNumber) {
        var pad = document.getElementsByClassName('pad')[0];
        var unshowed = pad.getElementsByTagName('li');
        for(var i = 0; i < unshowed.length; i++) {
            unshowed[i].style.zIndex = '5';
            unshowed[i].style.display = 'none';
        }
        unshowed[showedNumber].style.zIndex = 10;
        unshowed[showedNumber].style.display = 'block';
        };
        
    </script>
    </head>
    <body onload="loading();">
    <div>
        <div class="list">
        <ul>
            <li>pic_one</li><li>pic_two</li><li>pic_three</li>
        </ul>
        </div>
        <div class="pad">
        <ul>
            <li>pic_one</li><li>pic_two</li><li>pic_three</li>
        </ul>
        </div>
    </div>
    </body>
</html>

使用alert()打印差错，发现使用循环的时候，每个节点的动作，都是

//unshowed[i].onmouseover = function() { showThis(3);};

就是说，函数体里面的循环变量i都是3，而不是0,1,2。
我的问题就是，为什么循环变量一直是3，而不是0,1,2。
所以我怀疑是自己的js语法没学好，请各位指点，谢谢！

for(var i = 0; i < unshowed.length; i++) {
    (function(i) {
        unshowed[i].onmouseover = function() {showThis(i);};
    })(i);
}

https://.com/q/1010000004952017/a-1020000004952200
参考这个问题

【热门文章】