VPF::Волшебный toggle() или кривые руки?

Jops

Дата 13.2.2013, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 31.1.2013

Репутация: нет
Всего: нет

Здравствуйте уважаемый!

Столкнулся с абсурдностью toggle(), хотя наверное это моя логика столкнулась с абсурдом.

Задача в следующем: Функция во вложении формирует Таблицу ГРУППА КАМЕР -- ПОЛЬЗОВАТЕЛИ -- и ПРАВА ПОЛЬЗОВАТЕЛЕЙ на эти группы (рисунок сформированной таблицы прилагается). В свою очередь после каждой ГРУППЫ КАМЕР формируются <tr> с КАМЕРАМИ входящими в данную группу (+ отношения прав к каждому пользователю). Предполагалось, что при клике по <tr> в которой формируется ГРУППА КАМЕР и её ПРАВА, будут появляться/скрываться КАМЕРЫ со своими ПРВАМИ, входящие в данную группу

Проблема: click отрабатывает своё, но странно. При нажатии на любую <tr> с ГРУППОЙ КАМЕР, всегда появляются/ скрываются КАМЕРЫ относящиеся к последней ГРУППЕ КАМЕР (после неё конечно же). Остальные камеры как были скрыты, так и остались.

Если кто сталкивался с подобным, прошу помощи или хоть наводку куда копать.
Если что не понятно, отвечу и разжую более подробно.

Благодарю всех тех кто откликнется!

PS: click на 54 строке

Код


function rules_draw() {



    var usr_table = $("#rules_list");
    $('thead',usr_table).remove();
    $('tbody',usr_table).remove();
    var temp_line = null;
    // Шапка таблицы
    var temp_head = $('<thead/>', {});
    var temp_line = $('<tr/>', {});
    var temp_line_2 = null;
    $(temp_line)
    .append($('<th/>',{
        text: 'Камера/Пользователи'
    }));
/********************************************************************************************/
//Создание ПОЛЬЗОВАТЕЛЕЙ в заголовке таблицы (<th>)
    for (var usr_line in users) {
        var usr = users[usr_line];
        if(usr == null) {continue;}
                
        $(temp_line)
        .append($('<th/>',{})
            .append($('<div/>',{
                html: '<b>'+usr.user_login+'<b/><br/>',
                "class": lang.rules.allowedbox[usr.is_admin]
            }).bind('click',(function(usr){return function(){adm_usr(usr.user_id)}})(usr))
            .append($('<span/>',{html: '<span class="tip">(id: '+usr.user_id+')</span><br/>'}))
                
           )
        )
    ;
    $(usr_table).append(temp_line);
        }
$(temp_head).append(temp_line);
$(usr_table).append(temp_head);

// Тело таблицы



/********************************************************************************************/
//Создание ГРУПП КАМЕР в первой колонке таблицы (<td>)

$temp_line = null;

for (var cid in rules_all) {
    var rules = rules_all[cid]; //В cid приходят ID группы камер
    if(rules == undefined || rules == null) {continue;} 
        
    temp_line = $('<tr/>',{id:'rules'+cid});
        
    $(temp_line) .click(function () {$(".group"+cid).toggle();}) //click клеится на <tr/> с классом ("class": 'group'+cid), который вешается на камеры относящиеся к своей ГРУППЕ КАМЕР и должен по нажатию показывать/скрывать список камер (вместе с ячейками прав), содержащихся в данной группе
    

    
    
    
    .append($('<td/>',{})
          
        .append($('<div/>',{
            html: '<b>'+rules[usr.user_id].cam_group_name+'<b/><br/>',
            "class": lang.rules.allowedbox[rules[usr.user_id].rule_cam_status_user]})
                        
        .append($('<span/>',{html: '<span class="tip">(id: '+cid+')</span>'}))
        )

        );
                
/********************************************************************************************/
//Создание ПРАВ на пересечениях ПОЛЬЗОВАТЕЛЬ -- ГРУППА КАМЕР (<td>)               
                
                
    for (var usr_line in users) {
        var usr = users[usr_line];
        if(usr == null) {
            continue;
        }
        $(temp_line)
        .append($('<td/>',{})
            .append($('<div/>',{
                html:
                'Разрешено для пользователя: '+lang.rules.allowed[rules[usr.user_id].rule_cam_status_user]+'<br />'
                +'Разрешено для группы: '+lang.rules.allowed[rules[usr.user_id].rule_cam_status_group]+'<br />'
                +'Итог: '+lang.rules.allowed[rules[usr.user_id].result],
                "class":lang.rules.allowedbox[rules[usr.user_id].result]
            }))

            )
    ;
    }
        
        
    $(usr_table).append(temp_line);
    
/********************************************************************************************/
//Создание КАМЕР входящих в ГРУППУ КАМЕР в первой колонке таблицы (<td>)        
        
    for (var cam_id in rules_cam[cid]) {

        
    temp_line_2 = $('<tr/>',{id:'cam'+cam_id, "class": 'group'+cid});

    $(temp_line_2).hide() //Эти <tr/> по умолчанию скрыты. При click показываются или обратно скрываются
  
        .append($('<td/>',{})
          
        .append($('<div/>',{
            html: '<b>'+rules_cam[cid][cam_id].cam_name+'<b/><br/>',
            "class": 'f-cams'
            })
        .append($('<span/>',{
            html: '<span class="tip">(id: '+cam_id+')</span>'
            }))
        )

        );
            
/********************************************************************************************/
//Создание ПРАВ на пересечениях ПОЛЬЗОВАТЕЛЬ -- КАМЕРА (<td>)                         
                        
                        
    for (var usr_line in users) {
        var usr = users[usr_line];
        if(usr == null) {
            continue;
        }
        $(temp_line_2)
        .append($('<td/>',{})
            .append($('<div/>',{
                html:
                lang.rules.cams[rules_cam[cid][cam_id][usr.user_id].result],
                "class":lang.rules.allowedcamsbox[rules_cam[cid][cam_id][usr.user_id].result]
            }))

            )
    ;
    }
    
    
    
    $(usr_table).append(temp_line_2);
    }
}

}

Присоединённый файл ( Кол-во скачиваний: 1 )

Таблица.jpg 82,20 Kb

Aliance

Дата 13.2.2013, 13:44 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Начнем по порядку кода, что не так:
1) Зачем писать пустые фигурные скобки и ненужный закрывающий тег?

Код


var temp_line = $('<tr/>', {});

2) Зачем дважды элемент оборачивать в вызов функции jQuery?

Код


var temp_line = $('<tr/>', {});
$(temp_line).append(...);

3) Не знаю конечно какая версия jQuery используется, но в любом случае лучше обновиться до последней. Потому что конструкция вида

Код


.bind('click', ...)

устарела
4) Если конкретно по сабжу, то нужно почитать про замыкания (closure) и области видимости (scope).

Код


for (var cid in rules_all) {
    $('<tr/>',{id:'rules'+cid}).click(function () {$(".group"+cid).toggle();})

скорее всего в этом месте происходит разрыв области видимости и во время выполнения функции-обработчика события click идет обращения к переменной cid, последней объявленной. Подробнее здесь в разделе "Замыкания внутри циклов"
5) дальше не смотрел код, но что-то мне подсказывает, что таких мелких косяков найти там будет не трудно

Это сообщение отредактировал(а) Aliance - 13.2.2013, 13:44

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Jops

Дата 13.2.2013, 14:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 31.1.2013

Репутация: нет
Всего: нет

Спасибо. Посмотрю

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »