Использование Mouseenter/MouseLeave для изменения Div в JavaScript

Question

Я пытаюсь использовать индекс массива, чтобы разрешить набор идентификаторов div с одного ID на другой, когда запускаются функции mouseenter и mouseleave.

Я знаю, что есть другие способы сделать это - переключение, зависание или наведение CSS. Это просто учит меня, и я очень новичок.

Прокомментирован следующий код, и основная проблема связана с тем, почему переменная массива «largeID» (или smallID) выводит правильные значения, но попытка использовать значение индекса не имеет. Для каждого оператора for я хочу, чтобы значение smallID [i] было заменено значением большогоID [i], когда мышь входит в div, но я не хочу писать код для каждого из них, то есть «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 

     }); 

    } 

Answer 1

причина вашего largeID [я] не определено в функции MouseEnter потому, что последнее значение I запоминается и используется на вашем MouseEnter события.

Когда вы используете переменную, и она выходит из области видимости, автоматически создается закрытие, чтобы позволить переменной по-прежнему существовать для функции, которая по-прежнему необходима. он и ваш указатель мыши задействуют всю ссылку на одну и ту же переменную.

Ваш цикл цикла останавливается, когда я больше, чем количество divs, которое у вас есть с помощью radialDivList.length. Каждая попытка использовать i для ссылки на индекс в вашем массиве теперь будет за пределами границ.

Первый ответ на этой странице объясняет это хорошо: JavaScript closure inside loops – simple practical example

Я изменил свой пример, чтобы создать новую функцию с его собственной копией «я». Поэтому при наведении курсора на первый 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>