如何在Javascript中更有效地執行檢查和屏幕滾動？

Question

我正在構建一個具有大型窗體的Web應用程序。表單的頂部有五個按鈕，用戶可以點擊一個按鈕，並打開一個對話框。這些按鈕用於性別，體重，身高，頭髮顏色和眼睛顏色。

的按鈕啓動了展示類別的名稱和問號，像這樣：

Sex - ? 
Weight - ? 
Height - ? 
Hair - ? 
Eyes - ? 

因此，舉例來說，如果有人點擊該重量按鈕，JS對話框彈出，使他們選擇他們的體重。一旦他們完成並關閉對話框，問號就會變化以顯示他們挑選的實際重量，然後他們可以點擊另一個按鈕。

窗體的其餘部分有「正常」字段（標準輸入字段），我正在使用Jquery驗證來驗證它們。這一切工作正常，但Jquery驗證將無法正常工作，我上面描述的按鈕設置，所以我使用下面的代碼自己驗證它們。基本上，我檢查是否有任何問題，如果是的話（這意味着用戶還沒有選擇它），它「顯示」一個跨度有一個「必需」的消息它並且它滾動到頁面的頂部，否則它只會滾動到第一個無效的Jquery Validate表單（頁面上總是較低）。

我相當肯定下面的代碼是非常低效的。你同意嗎？如果Sex仍然有問號，代碼告訴屏幕滾動到頂部，但仍然需要再進行4次檢查，這似乎是錯誤的。

 if ($sexdisplaytext.indexOf('?') !== -1) { 
     $('#sex-display-error').show(); 
     $('html,body').animate({scrollTop:0},0); 
     } 
     if ($weightdisplaytext.indexOf('?') !== -1) { 
     $('#weight-display-error').show(); 
     $('html,body').animate({scrollTop:0},0); 
     } 
     if ($heighthdisplaytext.indexOf('?') !== -1) { 
     $('#height-display-error').show(); 
     $('html,body').animate({scrollTop:0},0); 
     } 
     if ($hairdisplaytext.indexOf('?') !== -1) { 
     $('#hair-display-error').show(); 
     $('html,body').animate({scrollTop:0},0); 
     } 
     if ($eyedisplaytext.indexOf('?') !== -1) { 
     $('#eye-display-error').show(); 
     $('html,body').animate({scrollTop:0},0); 
     } 

我希望有人能夠幫助解釋更好的方式來更有效地編寫此代碼。

或者我可能是過度分析，並且寫這段代碼的方式很好，並且/或者效率不足以導致性能/速度/任何問題？

任何有識之士將不勝感激。

Answer 1

if([$sexdisplaytext,$weightdisplaytext,$heighthdisplaytext,$hairdisplaytext,$eyedisplaytext].reduce(function(status,el){ 
    if (el.indexOf('?') !== -1) { 
    el.parent.show();//TODO get the error based on its relative position in dom, like 3rd child or sth 

    return true;//scroll to top 
    } 
    return status;//keep old status 
},false)) $('html,body').animate({scrollTop:0},0); 

簡單的循環在你elems的，然後滾動到頂部，如果你已發現錯誤...