如何在 Javascript 中更有效地执行检查和屏幕滚动？ [关闭]

Question

我正在构建一个大型表单的网络应用程序。表单的顶部有五个按钮，用户单击其中一个按钮会打开一个对话框。这些按钮用于性别、体重、身高、头发颜色和眼睛颜色。

按钮开始显示类别名称和问号，如下所示：

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

因此，例如，如果有人单击“体重”按钮，则会弹出一个 JS 对话框，允许他们选择自己的体重。一旦他们完成并关闭对话框，问号就会更改以显示他们选择的实际重量，然后他们可以单击另一个按钮。

表单的其余部分具有“普通”字段（标准输入字段），我正在使用 Jquery validate 来验证它们。一切正常，但 Jquery validate 不适用于我上面描述的按钮设置，所以我使用下面的代码自己验证它们。

基本上，我会检查其中是否有问号，如果有（这意味着用户尚未选择它），它会“显示”一个包含“必需”消息的跨度并且它会滚动到页面顶部，否则它只会滚动到第一个无效的 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);

只需循环遍历您的元素，然后在发现错误时滚动到顶部...