Как получить переменную в цепочечной функции с помощью mootools

Question

Я создал функцию, чтобы оживить мои HTML-формы, которая будет проверять, все ли поля действительны при отправке, и если нет, они мигают красным, чтобы предупредить пользователей. Все это прекрасно работает, пока не попытается вернуть цвет к нормальному.

if (response.length > 0) {
  for (var i = 0; i < response.length; i++) {
    if (response[i].getAttribute('field') != '') {
      var errField = $(response[i].getAttribute('field')+'Err');

      if (errField) {
        errField.set('html', response[i].getAttribute('msg'));
        var color = errField.getStyle('color');
        window['cfx'+i] = new Fx.Morph(errField, {
          duration: 400,
          transition: Fx.Transitions.Quad.easeInOut
        });

        window['cfx'+i].start({'color': '#000000'}).chain(function() {
          window['cfx'+i].start({'color': color});
        });
      }
    }
  }
}

Я отлаживал до такой степени, что могу сказать, что он потерпел крах, когда попал внутрь цепной функции, потому что в этой точке он теряет переменную. Я посмотрел вокруг и не могу понять, как получить i в функцию цепи для работы.

Answer 1

Эм. в основном, итератор будет работать и значение i переданная в цепочку функция всегда будет индексом последнего элемента в итерации.

несколько вещей, которые вы можете сделать - локальное замыкание рядом с вызовами - это одно или переписать весь цикл для использования Array.prototype.each вот так:

response.each(function(el, i){
    if (el.getAttribute('field') != ''){
        var errField = $(el.getAttribute('field') + 'Err');

        if (errField){
            errField.set('html', el.getAttribute('msg'));
            var color = errField.getStyle('color');
            window['cfx' + i] = new Fx.Morph(errField, {
                duration: 400,
                transition: Fx.Transitions.Quad.easeInOut
            });

            window['cfx' + i].start({'color': '#000000'}).chain(function(){
                window['cfx' + i].start({'color': color});
            });
        }
    }
});

значение i выше будет зафиксирован для итератора в рамках функции для каждой итерации, следовательно, получая желаемый эффект.

альтернативно они будут работать:

// permanent reference
var cfx = window['cfx' + i];
cfx.start({'color': '#000000'}).chain(function(){
    cfx.start({'color': color});
});

// binding the function via the outer scope to the element
window['cfx' + i].start({'color': '#000000'}).chain(function(){
    this.start({'color': color});
}.bind(window['cfx' + i]));

// encapsulating the i into a local closure
(function(i){
    // i is immutable here
    window['cfx' + i].start({'color': '#000000'}).chain(function(){
        window['cfx' + i].start({'color': color});
    });
}(i));

и, наконец, область видимости связанных функций - это экземпляр Fx, который хранит ссылку на элемент, объединяемый в цепочку. this.element так что это всегда будет указывать на элемент и this к примеру, следовательно, вы можете просто сделать:

window['cfx' + i].start({'color': '#000000'}).chain(function(){
    this.start({'color': color});
});

это об этом. повеселись