javascript - 我的 Javascript 有一些错误

Question

我编写了一个 JavaScript，其中使用了循环。我想在 div 标签上的 mouseover 和 mouseout 事件上显示和隐藏表格。所有div 命名为info1,info2,....info6，要显示的表命名为table12,table22,....table62，要隐藏的表命名为table11,table21,...table61... 。我有 7 个表，其中我使用 6 个表来使用此函数。所以我写了一个代码，但是每当我将鼠标指向任何 div 时，它都会更改第七个表的显示属性。下面是我的代码。请指出我的错误。

<script type='text/javascript'>
    window.onload = function() {
        for (var index = 1; index<= 6; index++){
            document.getElementById("info" + index).onmouseover = function() {
                document.getElementById ("table" + index + "1").style.display = "none";         
                document.getElementById ("table" + index + "2").style.display = "block";
                return false;
            };
            document.getElementById("info" + index).onmouseout = function() {
                document.getElementById ("table"+ index +"1").style.display = "block";
                document.getElementById ("table"+ index +"2").style.display = "none";
                return false;
            };
        }
    };
</script>

Answer 1

啊哈，我想这是一个关闭问题。你需要做的是:

for (var index = 1; index <=6 ; ++index) {
    document.getElementById('info' + index).addEventListener('mouseover', (function(i) { return function() {
        document.getElementById('table' + i + "1").style.display = 'none';
    }}(index)));
}

我会尝试解释，在你的代码中，

for(var index=1 ..) {
  document..onmouseover = function() { document.getElementById ("table" + index + "1")..
  ...
}

function() 内的 index 是一个 自由变量(在父作用域中定义并在子作用域中可访问)，它创建一个闭包，能够访问其创建范围内的其他本地变量。

您正在传递对变量的引用，而不是变量中存储的值。迭代的 i 变量的最后一个实际值实际上等于整数

Fiddle用于演示。