VPF::jQ: В чём разница между циклом и статикой?

InfMag

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

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

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

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

Имеется вот такой код:

Код


var click_status = new Array();
    click_status["form1"] = false;
    click_status["form2"] = false;
    click_status["form3"] = false;
    click_status["form4"] = false;
    click_status["form5"] = false;
    
    for (var KEY in click_status) {
        $("#hforms_menu_items").append('<a id="hforms_b_'+KEY+'"><img src="'+SITE_TEMPLATE_PATH+'/images/top_forms/'+KEY+'_off.png" /></a>');
        $("#hforms_b_"+KEY).click(function(){select_form(KEY);});
    }

Всё бы ничего, вроде ничего необычного, но последняя команда $("#hforms_b_"+KEY).click(function(){select_form(KEY);}); выполняется неправильно! Получается что происходит на всех ссылках клик как по последней, аля: $("#hforms_b_form5").click(function(){select_form("form5");});
При том что если сделать то же самое, но статично - всё работает как положено:

Код


var click_status = new Array();
    click_status["form1"] = false;
    click_status["form2"] = false;
    click_status["form3"] = false;
    click_status["form4"] = false;
    click_status["form5"] = false;
    
    for (var KEY in click_status) {
        $("#hforms_menu_items").append('<a id="hforms_b_'+KEY+'"><img src="'+SITE_TEMPLATE_PATH+'/images/top_forms/'+KEY+'_off.png" /></a>');
    }

    $("#hforms_b_form1").click(function(){select_form("form1");});
    $("#hforms_b_form2").click(function(){select_form("form2");});
    $("#hforms_b_form3").click(function(){select_form("form3");});
    $("#hforms_b_form4").click(function(){select_form("form4");});
    $("#hforms_b_form5").click(function(){select_form("form5");});

В чём собственно загвоздка? Я что-то делаю неправильно? Или это действительно нелогично?

Это сообщение отредактировал(а) InfMag - 2.10.2009, 14:50

unicross

Дата 2.10.2009, 17:10 (ссылка)

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

Загрузка ...

Опытный

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

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

InfMag, это нормальное явление и к jQuery особого отношения не имеет. Проблема в том, что при замыкании сохраняется контекст (ссылка на переменную KEY, а не ее значение). Подробности здесь: Один [[Scope]] на "всех" Второй пример - это ваш случай... smile

Это сообщение отредактировал(а) unicross - 2.10.2009, 17:13

brother79

Дата 2.10.2009, 18:25 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(unicross @ 2.10.2009, 17:10

)

InfMag, это нормальное явление и к jQuery особого отношения не имеет. Проблема в том, что при замыкании сохраняется контекст (ссылка на переменную KEY, а не ее значение). Подробности здесь: Один [[Scope]] на "всех" Второй пример - это ваш случай... smile

Не совсем понял в каком месте, но поидее это должно работать в такой схеме:

Код



var click_status = new Array();
    click_status["form1"] = false;
    click_status["form2"] = false;
    click_status["form3"] = false;
    click_status["form4"] = false;
    click_status["form5"] = false;
    
    for (var i in click_status) {
        var KEY=i;
        $("#hforms_menu_items").append('<a id="hforms_b_'+KEY+'"><img src="'+SITE_TEMPLATE_PATH+'/images/top_forms/'+KEY+'_off.png" /></a>');
        $("#hforms_b_"+KEY).click(function(){select_form(KEY);});
    }

По крайней мере у меня с такой схемой проблем не было.

Ещё по поводу массивов:
Я бы сделал объектами так:

Код



var click_status = {form1:false, form2: false, form3:false, form4:false, form5:false};

// тут старый вар-т должен работать, но ИМХО так элегантнее

$.each(click_status, function(e,i){
        var KEY=i;
        $("#hforms_menu_items").append('<a id="hforms_b_'+KEY+'"><img src="'+SITE_TEMPLATE_PATH+'/images/top_forms/'+KEY+'_off.png" /></a>');
        $("#hforms_b_"+KEY).click(function(){select_form(KEY);});
});

Надеюсь не перепутал пор-к параметров e,i

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

http://www.nastandart.com

IDVsbruck

Дата 2.10.2009, 22:04 (ссылка)

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

Загрузка ...

Опытный

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

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

Дали молоток, забыли показать как пользоваться. unicross все сказал, надо только переложить на другие рельсы.
Суть в том, что "внутренности" функции в клике интерпретируются не в момент объявления, а в момент выполнения. А так как в старом варианте KEY - переменная, последнее значение которой "form5", то все клики будут передавать в функции именно ее. "Чистым" кодом делается через замыкания, а в jQuery есть превосходный механизм, скрывающий замыкание, надо только передать "туда" свои переменные.

Код


var click_status = {form1:false, form2: false, form3:false, form4:false, form5:false};
$.each(click_status, function(_name, _value) {
    $("#hforms_menu_items").append('<a id="hforms_b_' + _name + '"><img src="' + SITE_TEMPLATE_PATH + '/images/top_forms/' + _name + '_off.png" /></a>');
    $("#hforms_b_" + _name).bind("click", {form_name:_name}, function(event){select_form(event.data.form_name);});
});

InfMag

Дата 5.10.2009, 15:39 (ссылка)

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

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

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

IDVsbruck, сработало! Большое спасибо! (+1)
Также по вашим советам перевёл на объекты массив свой. Я кстати сразу плеваться начал, когда у меня типичная конструкция не заработала:

Код


var arr = new Array(
   "key1" => "key1",
   "key2" => "key2"
);

Это сообщение отредактировал(а) InfMag - 5.10.2009, 15:45

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