Как вызвать функцию с правильным аргументом в объекте jQuery-resizable, который создается в цикле? - PullRequest
Новая
       25

Как вызвать функцию с правильным аргументом в объекте jQuery-resizable, который создается в цикле?

0 голосов
/ 03 июня 2011

У меня есть пара объектов с изменяемым размером, и я хотел бы вызвать функцию 'changeS ()', когда я прекращаю изменять размер объекта.
Функция changeS () должна принимать в качестве первого аргумента имя объекта, для которого онаС.changeS (# resizable1, new_size - old_size) и т.д.в цикле for (), потому что будет гораздо больше объектов, и тогда у меня возникнет проблема: 

var old_size=0;
var new_size=0;
var x,i;

for(i=0; i<5; i++){
x = "#resizable"+i;
var $res = $(x);

$res.resizable({
    grid: 22, minHeight:22, handles: 's',
    start: function(event,ui) {
        old_size = ui.originalSize.height;
    },
    stop: function(event,ui) {
        new_size = ui.size.height;

        if(new_size!=old_size)
            changeS($res,new_size - old_size);
    }
});
}

Я не знаю, как правильно передать имя объекта в качестве аргумента функции.
Когда функция changeS () выполняется, она всегда вызывается с тем же именем - именем последнего созданного объекта (в данном случае "# resizable5" -).

Мой вопрос:
Как сделатьЯ делаю для каждого объекта функциюchangeS () был вызван с соответствующим аргументом (имя этого объекта)?

Спасибо, popKonr

1 Ответ

1 голос
/ 03 июня 2011

Функции, которые вы создаете в цикле: замыкания . Они сохраняют стойкую ссылку на переменные, по которым они закрываются, не копию значения на момент определения функции. И поэтому все они видят последнее значение, которое вы присваиваете $res, а не значение во время «их» цикла.

Обычный способ решить эту проблему - использовать заводскую функцию, что-то вроде этого: 

var x,i;

for(i=0; i<5; i++){
    x = "#resizable"+i;
    var $res = $(x);

    makeResizeable($res);
}

function makeResizeable($thisres) {
    var old_size = 0,
        new_size = 0;

    $thisres.resizable({
        grid: 22, minHeight:22, handles: 's',
        start: function(event,ui) {
            old_size = ui.originalSize.height;
        },
        stop: function(event,ui) {
            new_size = ui.size.height;

            if(new_size!=old_size)
                changeS($thisres,new_size - old_size);
        }
    });
}

Обратите внимание, как мы теперь используем $thisres, аргумент, передаваемый в фабричную функцию makeResizeable, а не $res, поскольку аргумент, встроенный в функции, которые мы создаем в makeResizeable, не изменяется. Также обратите внимание, что я переместил new_size и old_size в эту фабричную функцию. Обработчики событий будут закрывать эти данные, и каждая пара получит свои собственные копии этих переменных.

Замыкания не сложны , но есть несколько фундаментальных вещей, которые люди склонны неправильно понимать. Но как только вы их опустите, вы будете в хорошей форме.

...