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

ERM。基本上，迭代器将运行，并且传递给链式函数的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});
});

就是这样。玩得开心

如何使用mootools将变量转换为链式函数

1 个答案: