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

很多更好的方法来执行这些操作if..then ... 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属性。

参考 -

Answer 3

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

单行：

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

但是，您的ID似乎不太常规，因此我建议使用映射器（可能重复）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 4

最好设置CSS：

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

Answer 5

对于初学者，您可以创建css类并使用jQuery中的addClass函数

<强> Examaple：

<强> CSS

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

<强>的jQuery

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

Answer 6

在编写代码时

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

在几个地方重复更改样式。你能把它变成一个函数，你传递错误字段名称。

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

由于

Answer 7

您可以根据whichToCheck的值生成id并使用jQuery的hide方法隐藏元素：

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

将toToCheck和相应的输入元素传递给函数。

Answer 8

使用Armel所述的Switch（）语句。
提取Show（）＆amp;单独隐藏（）方法。

以下是样本：

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

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

9 个答案: