有沒有辦法縮短這段代碼？

Question

有沒有更簡單的方法（更清潔的方式）做我的下面的代碼？

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

謝謝！

Answer 1

首先，您應該使用開關塊並將要修改的元素存儲在變量中。 短版：

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

Answer 2

這一個最好設置CSS：

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

Answer 3

一個多更好的方式，如果做到這些。那麼... 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屬性。

參考 -

• switch()
• show()
• hide()

Answer 4

對於初學者來說，你可以創建CSS類和jQuery的

了Exa使用addClass功能楓木：

CSS

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

jQuery的

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

Answer 5

當你寫你的代碼

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

重複在幾個地方的風格變化。你可以把它變成一個函數，讓你傳遞錯誤字段名稱。

對於#error3你傳遞參數爲3，然後顯示和可見性參數。

感謝

Answer 6

你可以基於whichToCheck價值的ID和使用jQuery的隱藏方法來隱藏要素：

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

通行證在whichToCheck和相應的輸入元素的功能。

Answer 7

您可以通過動態選擇元素縮短很多。另外，把它們放在「緩存」變量中，而不是重新創建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"](); 

Answer 8

1. 使用開關（）語句提到的阿梅爾。
2. 提取顯示（）&分別隱藏（）方法。

下面是示例：

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

Answer 9

縮短你的代碼的關鍵似乎是whichToCheck變量的來源。或者你可以這樣做：

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