1

Цикл, который пробегается по всем дивам в заданном контейнере неправильно навешивает классы на событие onmouseout

for (var i=0; i<divs.length; i++){
    var cssClass = 'box n'+(i+1); //создаем класс 'box n1'
    divs[i].className = cssClass;
    divs[i].onmouseover = function(){
        this.className= cssClass+' hover'
    }
    divs[i].onmouseout = function(){
            this.className= cssClass
    }
//console.log(cssClass); Показывает что в каждой итерации класс правильный
}

Ошибка в том, что при событии элементу навешивается не свой класс, а класс последнего элемента, в данном случае 'box n42', вместо своего родного. Почему происходит это, ведь консоль показывает, что в каждой итерации, когда навешивается событие класс правильный?

2 ответа 2

2

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

for (var i=0; i<divs.length; i++){
    (function(){
        var cssClass = 'box n'+(i+1);
        divs[i].className = cssClass;
        divs[i].onmouseover = function(){
            this.className= cssClass+' hover'
        }
        divs[i].onmouseout = function(){
            this.className= cssClass;
        }
    })();
}

Вот хорошая статья на тему замыканий.

1

Название класса не может содержать символов пробелов - иначе у Вас будут 2 класса.
В код не всматривался - мои познания чистого js незначительны...
Вот аналог Вашего кода, но на jQuery:

$(document).ready(function(){
    var iterator = 1;
    $("#some_divs_selector").each(function(){
        var myClass = "some_class_" + iterator++;
        $(this).addClass(myClass);
    });
});

Ваш ответ

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

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