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);

简单地循环你的元素，然后如果你发现错误就滚动到顶部......

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

1 个答案: