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

谢谢！

4

9 回答 9

3

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

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-17T13:42:32.197 回答
2

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

在单行中：

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

但是，您的 id 似乎不太规则，因此我建议使用映射器（可能重复）替代一百万个 IF 语句：

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 and visibility，如果您使用 jQuery 的.hide()/.show()它也适用于非块元素：

errorEl[hasErrors ? "show" : "hide"]();
于 2012-09-17T13:47:31.340 回答
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;
}

您可以做的另一件事来减少您拥有的代码是使用 jQueryshow()和hide()函数来...嗯...隐藏和显示元素:) 您实际上不必显式设置displayandvisibility属性。

参考 -

于 2012-09-17T13:43:22.693 回答
1
  1. 使用 Armel 提到的 Switch() 语句。
  2. 分别提取 Show() 和 Hide() 方法。

这是示例：

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-17T13:49:13.210 回答
1

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

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

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

于 2012-09-17T13:45:29.057 回答
1

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

//...
if ( $('#input_' + whichToCheck).val().length ) {
    $('#error_' + whichToCheck).css ( { 'display' : 'none', 'visibility' : 'hidden' } );
} else {
    $('#error_' + whichToCheck).css ( { 'display' : 'block', 'visibility' : 'visible' } );        
}
于 2012-09-17T13:50:06.567 回答
1

这个最好设置CSS：

$('#error1').css({'display': 'none', 'visibility': 'hidden'});
于 2012-09-17T13:42:45.237 回答
1

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

示例：

CSS

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

jQuery

$('#error1').addClass("hide");
于 2012-09-17T13:43:42.067 回答
1

当您编写代码时

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

在几个地方重复以改变风格。你能把它变成一个函数，这样你就可以传递错误字段名称。

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

谢谢

于 2012-09-17T13:44:07.173 回答