在javascript中分配有些破碎的元素?

时间:2014-04-14 14:35:44

标签: javascript jquery

http://jsfiddle.net/aRV7q/1/

function multierror(elements, messages){
    while(elements.length > 0){
        box = $(elements.pop());
        errTab = $('#error');

        errTab.fadeOut(10, function(){
            box.css('border', '1px solid red');
            errTab.html(messages.pop());
        }).fadeIn(10);

        errTab.fadeOut(5000, function(){
            box.css('border', '1px solid #cccccc');
            errTab.html('&nbsp');
        }).fadeIn(1000);
    }
} 

这是我正在尝试运行的函数,它应该淡化$('#error')上的一些消息并突出显示我在表单中的一些输入框。 消息在消息变量上,输入框的#name在元素变量上。

但是发生的事情是消息被弹出并正确显示,但是选中要突出显示的元素总是相同的,尽管当while循环迭代时总是弹出一个项目,所以我想一旦设置,变量框就是从未重新分配,但我认为没有理由。

有什么想法吗?

1 个答案:

答案 0 :(得分:9)

这是因为fadeOut具有异步回调,当while循环已经传递给数组的最后一个元素时调用该回调。

一种可能的解决方案是添加一个闭包,它将保留box的每个值以供将来回调:

while (elements.length > 0) {
    (function(box) {
        var errTab = $('#error');

        errTab.fadeOut(10, function() {
            box.css('border', '1px solid red');
            errTab.html(messages.pop());
        }).fadeIn(10);

        errTab.fadeOut(5000, function() {
            box.css('border', '1px solid #cccccc');
            errTab.html('&nbsp');
        }).fadeIn(1000);
    })($(elements.pop()));
}

DEMO: http://jsfiddle.net/aRV7q/5/