有没有办法缩短这段代码？

-1

有没有更简单的方法（更清洁的方式）做我的下面的代码？有没有办法缩短这段代码？

if (whichToCheck == 1) { 
    if ($('#input_3').val().length) { 
     $('#error1').css('display', 'none'); 
     $('#error1').css('visibility', 'hidden'); 
     hasErrors = false; 
    } else { 
     $('#error1').css('display', 'block'); 
     $('#error1').css('visibility', 'visible'); 
     hasErrors = true; 
    } 
} 
else if (whichToCheck == 2) { 
    if ($('#input_4').val().length) { 
     $('#error2').css('display', 'none'); 
     $('#error2').css('visibility', 'hidden'); 
     hasErrors = false; 
    } else { 
     $('#error2').css('display', 'block'); 
     $('#error2').css('visibility', 'visible'); 
     hasErrors = true; 
    } 
} 
else if (whichToCheck == 3) { 
    if ($('#input_5').val().length) { 
     $('#error3').css('display', 'none'); 
     $('#error3').css('visibility', 'hidden'); 
     hasErrors = false; 
    } else { 
     $('#error3').css('display', 'block'); 
     $('#error3').css('visibility', 'visible'); 
     hasErrors = true; 
    } 
} 
else if (whichToCheck == 4) { 
    if ($('#input_7_0').is(':checked')) { 
     $('#error4').css('display', 'none'); 
     $('#error4').css('visibility', 'hidden'); 
     hasErrors = false; 
    } else { 
     $('#error4').css('display', 'block'); 
     $('#error4').css('visibility', 'visible'); 
     hasErrors = true; 
    } 
} 
else if (whichToCheck == 5) { 
    if ($('#input_6').val().length) { 
     $('#error5').css('display', 'none'); 
     $('#error5').css('visibility', 'hidden'); 
     hasErrors = false; 
    } else { 
     $('#error5').css('display', 'block'); 
     $('#error5').css('visibility', 'visible'); 
     hasErrors = true; 
    } 
}

谢谢！

来源

2012-09-17 StealthRT

这属于[Codereview.SE]。 – zzzzBov

没有什么理由设置“display：none”和“visibility：hidden”，特别是如果你要同时撤销这两个选项。 – Blazemonger

同意下面的内容（切换块和设置CSS），但所有常见属性都可以设置一次，每块更改一次 – ericosg

首先，您应该使用开关块并将要修改的元素存储在变量中。短版：

var input, error; 
switch(whichToCheck){ 
    case 1: 
     input=$('#input_3'); 
     error=$('#error1'); 
     break; 
    case 2: 
     input=$('#input_4'); 
     error=$('#error2'); 
     break; 
    default: 
     ... 
     break; 
} 
var hasErrors = !!input.val().length; 
if(hasErrors) error.show(); else error.hide();

或者为最终较短：

hasErrors&&error.show(); 
hasErrors||error.hide();

来源

2012-09-17 13:42:32

'hasErrors && error.show（）'是一种编码风格，它使得它完全不可读，几乎不可能维护 – wroniasty

这是生产代码，而不是开发。我不同意。 –

你的意思是说开发代码可能不可读？ – wroniasty

这一个最好设置CSS：

$('#error1').css({'display': 'none', 'visibility': 'hidden'});

来源

2012-09-17 13:42:45 keaukraine

感谢您设置CSS的简短方式，keaukraine！ – StealthRT

一个多更好的方式，如果做到这些。那么... else语句将使用switch语句。特别是当有你正在寻找...

switch(whichToCheck){ 
    case "1": 
    // when whichToCheck == 1 
    break; 
    case "2": 
    // when whichToCheck == 2 
    break; 
    default: 
    // when the value of whichToCheck doesn't match any expected value 
    break; 
}

另一件事多个值，你可以做，以减轻你的代码是使用jQuery的show()和hide()功能...好...捉迷藏显示元素:)您并不需要明确设置display和visibility属性。

参考 -

来源

2012-09-17 13:43:22 Lix

对于初学者来说，你可以创建CSS类和jQuery的

了Exa使用addClass功能枫木：

CSS

.hide{ 
    display: none; 
    visibility: hidden; 
}

jQuery的

$('#error1').addClass("hide");

来源

2012-09-17 13:43:42 Chase

我想过这样做，但仍然只想使用一个CSS类。 – StealthRT

您可以使用'hide'类并在适当的时候设置它，而不是使用新的类来使用jQuery所提供的'removeClass'函数。 – Chase

当你写你的代码

$('#error3').css('display', 'block'); 
$('#error3').css('visibility', 'visible');

重复在几个地方的风格变化。你可以把它变成一个函数，让你传递错误字段名称。

对于#error3你传递参数为3，然后显示和可见性参数。

感谢

来源

2012-09-17 13:44:07 Abhi

你可以基于whichToCheck价值的ID和使用jQuery的隐藏方法来隐藏要素：

function toggleErrors($input, whichToCheck){ 
    if($input.val() !== '' || $input.is(':checked')){ 
    $('#error' + whichToCheck).hide(); 
    }else{ 
    $('#error' + whichToCheck).show(); 
    } 
}

通行证在whichToCheck和相应的输入元素的功能。

来源

2012-09-17 13:45:29

这是正确的，但我也有一个复选框的值。 – StealthRT

我添加了一个黑客的检查条件。不过，如果可能的话，我鼓励您使用关系来连接输入和错误元素。 –

**输入**代表什么？应该是** this.value **？ – StealthRT

您可以通过动态选择元素缩短很多。另外，把它们放在“缓存”变量中，而不是重新创建jQuery实例。你可以通过传入一个对象来使用jQuery's .css() method的简写形式。此外，您应该将这两种不同的样式放入变量中，而不是重复它们 - 尽一切努力使代码更加干爽。

在一个班轮：

$('#error'+whichToCheck).css((hasErrors = !$('#input_'+(2+whichToCheck)).val().length) 
    ? {display: 'block', visibility: 'visible'} 
    : {display: 'none', visibility: 'hidden'} 
);

然而，你的IDS似乎不是太正规，所以我推荐一个映射器在（可能重复）Alternative to a million IF statements：

var toCheck = document.getElementById('input_' + {1:'3', 2:'4', 3:'5', 4:'7_0', 5:'6'}[whichToCheck]), 
    errorEl = $('#error'+whichToCheck); 
hasErrors = !(toCheck.type=="checkbox" ? toCheck.checked : toCheck.value); 
if (hasErrors) 
    errorEl.css({display: 'block', visibility: 'visible'}); 
else 
    errorEl.css({display: 'none', visibility: 'hidden'});

而且，您不需要设置display和visibility，如果您使用jQuery的.hide()/.show()它也可以用于非块元素：

errorEl[hasErrors ? "show" : "hide"]();

来源

2012-09-17 13:47:31 Bergi

您是否注意到该复选框？ **如果（$（'＃input_7_0'）。（'：checked'））{** – StealthRT

感谢您的提示，我修改了代码。 – Bergi

新代码现在似乎不适用于输入框。在箱子里什么都没有的时候，坚持说真话。 – StealthRT

使用开关（）语句提到的阿梅尔。
提取显示（）&分别隐藏（）方法。

下面是示例：

if (whichToCheck == 1) { 
     if ($('#input_3').val().length) { 
      Show('#error1'); 
      hasErrors = false; 
     } else { 
      Hide('#error1'); 
      hasErrors = true; 
     } 
    } else if (whichToCheck == 2) { 
     if ($('#input_4').val().length) { 
      Show('#error2'); 
      hasErrors = false; 
     } else { 
      Hide('#error2'); 
      hasErrors = true; 
     } 
    } else if (whichToCheck == 3) { 
     if ($('#input_5').val().length) { 
      Show('#error3'); 
      hasErrors = false; 
     } else { 
      Hide('#error3'); 
      hasErrors = true; 
     } 
    } else if (whichToCheck == 4) { 
     if ($('#input_7_0').is(':checked')) { 
      Show('#error4'); 
      hasErrors = false; 
     } else { 
      Hide('#error4'); 
      hasErrors = true; 
     } 
    } else if (whichToCheck == 5) { 
     if ($('#input_6').val().length) { 
      Show('#error5'); 
      hasErrors = false; 
     } else { 
      Hide('#error5'); 
      hasErrors = true; 
     } 
    } 

    function Show(id) { 

     $(id).show(); 

    } 

    function Hide(id) { 
     $(id).hide(); 
    }

来源

2012-09-17 13:49:13 Dhanasekar

那么为什么你没有实现交换机？ – Lix

在这里，我已经提到要使用Switch假设这个人知道如何使用。所以，我解释了如何使用Switch。但我想指出，为隐藏和显示移动一些sphagetti编码来分离方法来照顾它们。这是我解释中的上下文，而不是“使用Switch”。 – Dhanasekar

缩短你的代码的关键似乎是whichToCheck变量的来源。或者你可以这样做：

//... 
if ($('#input_' + whichToCheck).val().length) { 
    $('#error_' + whichToCheck).css ({ 'display' : 'none', 'visibility' : 'hidden' }); 
} else { 
    $('#error_' + whichToCheck).css ({ 'display' : 'block', 'visibility' : 'visible' });   
}

来源

2012-09-17 13:50:06 wroniasty

有没有办法缩短这段代码？

回答

相关问题