Question

我需要检查来自'inputs'数组的输入字段的循环，如果有空字段，则需要在它们附近显示特殊对话框，并且在显示对话框后我需要将类'style'添加到显示对话框的输入字段，然后对话框应转到下一个emppty字段并向其添加类“样式”。等等，直到所有空输入都有类“风格”。

问题是，在显示对话框后的循环中，类'style'仅添加到数组中的最后一个元素，但是应该将它添加到每个空元素中，并且延迟介于两者之间。

这是我的循环，但正如我所说它不能正常工作：

for(i=0;i<inputs.length;i++){
var now = inputs[i];
var top = inputs[i].attr('top');
    if(!now.val()){
    if(dialog.css('display')=='none'){now.addClass('style');dialog.css('top',top).fadeIn(200);}
    else{dialog.delay(300).animate({"top": top}, 500, function(){now.addClass('style');});
    }else{now.removeClass('style');}}

P.S。抱歉我的英文。

Answer 1

这种情况正在发生，因为调用'addClass'的函数发生在300毫秒动画之后。到那时，'i'变量的值已经改变，因为for循环将继续运行。

您可能只能在'animate'和延迟之前调用'now.addClass'。否则，您必须打破循环并在动画完成后继续以防止变量被覆盖。

以下是我所谈论的一个例子。下面的代码将一次处理1个输入，而不是继续下一个输入，直到当前的处理完成（此代码尚未经过测试）：

var offset = -1;

var inputs = (something goes here)

iterateInputs();

function iterateInputs()
{
    offset++;

if (typeof inputs[offset] != 'undefined')
{
    eachInput();
}
else
{
    // all done!
}
}

function eachInput()
{
var now = inputs[offset];
var top = inputs[offset].attr('top');
if (!now.val())
{
    if (dialog.css('display')=='none')
    {
        now.addClass('style');
        dialog.css('top', top).fadeIn(200, function(){
            iterateInputs();
        });
    }
    else
    {
        dialog.delay(300).animate({"top": top}, 500, function(){
            now.addClass('style');
            iterateInputs();
        });
    }
}
else
{
    now.removeClass('style');
    iterateInputs();
}
}

通过循环向数组元素添加类

1 个答案: