Използване на Mouseenter / MouseLeave за промяна на Div в JavaScript

Опитвам се да използвам индекс на масив, за да позволя на набор от идентификатори на div да се променят от един идентификатор на друг, когато се задействат функциите mouseenter и mouseleave.

Знам, че има други начини да направите това - превключване, задържане на курсора или CSS задържане. Това е просто обучение за мен и съм много нов.

Кодът по-долу е коментиран и основният проблем е свързан с това защо променлива на масив от "largeID" (или smallID) извежда правилните стойности, но опитът да се използва стойност на индекс не. За всеки оператор for искам стойността smallID[i] да бъде заменена със стойността largeID[i], когато мишката влезе в div, но не искам да пиша кода за всеки един, т.е. "largeID[1] , голям ИД[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 arrays jquery mouseenter mouseleave
person boucains    schedule 04.01.2016    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Причината, поради която вашият largeID[i] е недефиниран във вашата функция mouseenter, е, че последната стойност на i се запомня и използва във вашите събития mouseenter.

Когато използвате променлива и тя излезе "извън обхвата", автоматично се създава затваряне, което позволява на променливата да съществува за функцията, която все още се нуждае от нея, и вашите функции mouseenter всички препращат към една и съща променлива.

Вашият for цикъл спира, когато i е повече от количеството div, което имате, като използвате radialDivList.length. Всеки опит да използвате i за препратка към индекс във вашия масив вече ще бъде извън границите.

Първият отговор на тази страница го обяснява добре: Вътрешни цикли на JavaScript затваряне – прост практически пример

Промених вашия пример, за да създам нова функция със собствено копие на "i". Така че, когато задържите курсора на мишката върху първия div i ще бъде равен на 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>

person ProgrammerGuy    schedule 04.01.2016
comment
- Перфектно. Знаех, че проблемът е в тази област, но не знаех как да напиша действителния код. Вашето обяснение за стойността на [i] беше особено полезно! - person boucains; 04.01.2016