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);
}

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

1 ответ 1

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);
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.