2

Есть два массива, которые расположены в специальном порядке. Мне надо, чтобы при boxNav[0] в функцию noneWrap передавался элемент массива displayWrapper[0]. То есть, если:

boxNav[1] = noneWrapper(displayWrapper[1])
boxNav[2] = noneWrapper(displayWrapper[2])
boxNav[3] = noneWrapper(displayWrapper[3])

Но блин получается какая-то ересь с j в обработчике:

var boxNav = [ document.getElementById('page_groups'),
               document.getElementById('human_groups'),
               document.getElementById('group_groups'),
               document.getElementById('worker_groups') ];

var displayWrapper = [ document.getElementById('idol_page'),
                       document.getElementById('idol_user'),
                       document.getElementById('in_group'),
                       document.getElementById('my_fans') ];


for(var j = 0; j < 4; ++j) {
  boxNav[j].addEventListener('click', function(){


noneWrapper( displayWrapper[j] );
alert(j);                 // == 4
alert(displayWrapper[j]); // == undefined

this.firstChild.style.color = 'white';
this.style.backgroundColor  = '#597DA3';
restartGroupNav(this);




},false);
}

Почему такое происходит и как сделать, чтобы работало нормально?

Deleted
  • 371
Zow
  • 2,468

1 Answers1

10

всё дело в замыканях, когда вы выполняете в цикле

boxNav[j].addEventListener('click', function(){
    // ...
    ... j
    // ...
})

переменная j "замыкается"(не копируется, для всех хендлеров - будет использована одна и та же переменная), но в цикле вы её инкрементируете, т.о. всегда получается конечное значение.

самый простой способ избежать этого - IIFE:

for(var j = 0; j < 4; j++){ // почему вы используете префиксный инкремент?

boxNav[j].addEventListener('click', (function(i){
    return function(){
        noneWrapper(displayWrapper[i]);
        alert(i)
        // ...
    }
}(j)),false)



}

или так:

for(var j = 0; j < 4; j++){ 
    (function(i){
        boxNav[i].addEventListener('click', function(){
            noneWrapper(displayWrapper[i]);
            alert(i)
            // ...
        },false);
    }(j))
}

или так:

boxNav.forEach(function(box, idx){
    box.addEventListener('click', function(){
        noneWrapper(displayWrapper[idx]);
        alert(idx)
        // ...
    },false);
});
Spectre
  • 12,309