通過循環將類添加到數組元素

Question

我需要檢查“輸入”數組中輸入字段的循環，如果有空字段，則需要在它們附近顯示特殊對話框，並且在顯示對話框之后，我需要將“樣式”類添加到附近的輸入字段中顯示對話框的對話框，然后對話框應轉到下一個“ Empty”字段，並向其中添加“樣式”類。 依此類推，直到所有空輸入都具有“樣式”類。

問題是，在對話框顯示后的循環中，類'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');}}

PS對不起，我的英語。

Answer 1

之所以發生這種情況，是因為調用“ addClass”的函數是在300毫秒動畫之后發生的。 到那時，因為for循環將繼續運行，所以'i'變量的值已更改。

您可能只可以在“動畫”和延遲之前進行“ 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();
}
}