通過循環向數組元素添加類

Question

我需要檢查'inputs'數組的輸入字段的循環，如果有空字段，需要在它們附近顯示特殊對話框，並且在顯示對話框後，我需要class'樣式「添加到顯示對話框的輸入字段中，然後對話框應轉到下一個emppty字段並向其添加類」樣式「。依此類推，直到所有空輸入都有類風格。

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

附：對不起我的英語不好。

Answer 1

這是因爲調用'addClass'的函數在300毫秒動畫之後發生。那時，'i'變量的值已經改變，因爲for循環將繼續運行。

您可能只能在'動畫'之前進行'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(); 
} 
}