jquery - Поместить цикл .each () внутри цикла for?

Тема: Роллер-дерби. У меня 8 команд, в каждой по 4 игрока. Я собираюсь отображать команды на странице в сетке. 8 команд на 4 игрока меньше. Когда вы переворачиваете любого игрока, все игроки одной команды загораются.

Это будет выглядеть так...

X X X X X X X X
X X X X X X X X
X X X X X X X X
X X X X X X X X

Каждый игрок является подразделением, и каждая команда получает класс ("команда1", "команда2", "команда3" ....). Как я могу перебирать каждую команду и вложенный цикл каждого игрока, чтобы добавить функцию для изменения атрибута класса команды?

Это то, что у меня сейчас есть (это работает, но только для "team1")...

$(document).ready(function() {
        $('.team1').mouseenter(function(){
            $('.team1').css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team1').mouseleave(function(){
            $('.team1').css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
});

Я мог бы жестко запрограммировать каждую команду, но что, если бы у меня было 100 команд? Это то, что я снимаю (в настоящее время не работает)...

$(document).ready(function() {
    for (var t=0;t<9;t++){
        $('.team'+t).mouseenter(function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team'+t).mouseleave(function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
    }
});

Заранее спасибо.


loops nested-loops
person Think Floyd    schedule 03.10.2012    source источник
comment
Я не вижу .each() в вашем коде, возможный дубликат закрытие Javascript внутри циклов - простой практический пример   -  person Musa    schedule 03.10.2012
comment
Прошу прощения, если об этом уже спрашивали. Кажется, я не могу найти решение, которое помогло бы мне понять это. Я тоже не понимаю, как пример, который вы опубликовали, будет работать для меня. Я обновил свой вопрос и код выше. Первая часть работает нормально, пока имя класса команды жестко запрограммировано (например, team1 против team+x), но когда я пытаюсь сделать его динамичным, добавляя переменную в класс, он больше не работает.   -  person Think Floyd    schedule 03.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключается в том, что значение t при выполнении функции не совпадает с тем, когда были определены анонимные функции в обработчиках mouseenter/leave.

см. http://www.javascriptkit.com/javatutors/closures.shtml.

$(document).ready(function() {
    function me(t){
        return function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        }
    }
    function ml(t){
        return function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        }
    }
    for (var t=0;t<20;t++){
        $('.team'+t).mouseenter(me(t));     
        $('.team'+t).mouseleave(ml(t));
    }
});
person Musa    schedule 03.10.2012
comment
Большое спасибо. У меня были подобные ситуации в прошлом, поэтому я понимаю ваше объяснение проблемы. Я пока не понимаю, как работает ваше решение, но оно ДЕЙСТВИТЕЛЬНО работает как шарм. В постель теперь спать и понимание придет со свежим взглядом. Еще раз Спасибо БОЛЬШОЕ! - person Think Floyd; 03.10.2012