极客观点
项目管理
HarmonyOS
做了一个简陋的标签页，但是使用循环为每个标签头添加动作的时候，不按照我的想法工作。
原本是想在鼠标经过每个标签头的时候，下面的内容自动切换。
代码如下：
<!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语法没学好，请各位指点，谢谢！
https://segmentfault.com/q/1010000004952017/a-1020000004952200
参考这个问题