在 JavaScript 中使用 Mouseenter / MouseLeave 更改 Div答案

【问题标题】：Using Mouseenter / MouseLeave to Change Div in JavaScript在 JavaScript 中使用 Mouseenter / MouseLeave 更改 Div
【发布时间】：2016-01-04 01:39:49
【问题描述】：

我正在尝试使用数组索引来允许一组 div ID 在触发 mouseenter 和 mouseleave 函数时从一个 ID 更改为另一个 ID。

我知道还有其他方法可以做到这一点 - 切换、悬停或 CSS 悬停。这只是对我的学习，我很新。

下面的代码被注释了，基本问题与为什么“largeID”（或smallID）的数组变量输出正确的值，但尝试使用索引值却没有。对于每个for语句，我希望鼠标进入div时将smallID[i]值替换为largeID[i]值，但我不想为每个语句编写代码，即“largeID[1] , largeID[2]。

感谢大家的指点！！

$(document).ready(function() {

    var smallID = [];
    var largeID = [];

    var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
    var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div

    for(var i = 0; i < radialDivList.length; i++) {
        if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
        if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
        smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
        largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element

        alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
        alert(largeID[i]); // give rational and expected output

        $('#' + smallID[i]).mouseenter(function () { //works for all four radial menu divs when mouse enters
            //BUT largeID[i] is undefined
            alert(largeID[i]); // undefined
            alert(largeID); // gives expected output of full array
        }).mouseleave(function () { //mouseleave function not working

        });

    }

【问题讨论】：

标签： javascript jquery arrays mouseenter mouseleave

【解决方案1】：

在 mouseenter 函数中未定义 largeID[i] 的原因是 i 的最后一个值被记住并用于 mouseenter 事件。

当您使用一个变量并且它“超出范围”时，会自动创建一个闭包，以允许该变量对于仍然需要它的函数仍然存在，并且您的 mouseenter 函数都引用同一个变量。

当 i 大于您使用radialDivList.length 所拥有的 div 数量时，您的 for 循环将停止。现在，每次尝试使用 i 来引用数组中的索引都将超出范围。

此页面上的第一个答案很好地解释了它： JavaScript closure inside loops – simple practical example

我已经修改了您的示例，使用它自己的“i”副本创建了一个新函数。因此，当悬停在第一个 div 上时，我将等于 0，当悬停在第二个 div 上时，它将等于 1，等等。

$(document).ready(function() {

  var smallID = [];
  var largeID = [];

  var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
  var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div
  var funcs = [];

  for (var i = 0; i < radialDivList.length; i++) {
    if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
    if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
    smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
    largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element

    alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
    alert(largeID[i]); // give rational and expected output
    funcs[i] = function(i) {
      $('#' + smallID[i]).mouseenter(function() { //works for all four radial menu divs when mouse enters
        //BUT largeID[i] is undefined
        alert(largeID[i]); // undefined
        alert(largeID); // gives expected output of full array
      }).mouseleave(function() { //mouseleave function not working

      });
    }.bind(this, i);
  }

  for (var i = 0; i < funcs.length; i++) {
    funcs[i]();
  }
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Example</title>
</head>

<body>
  <div>
    <div>
      <div id="one" style="background:green;height:40px">
      </div>
      <div id="two" style="background:red;height:40px">
      </div>
      <div id="three" style="background:blue;height:40px">
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

- 完美。我知道问题出在那个区域，但不知道如何编写实际代码。 您对 [i] 值的解释特别有帮助！