javascript - このコードを短くする方法はありますか?

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

まず、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();

Answer 2

要素を動的に選択することで、大幅に短縮できます。また、jQuery インスタンスを再作成する代わりに、それらを「キャッシュ」変数に入れます。また、オブジェクトを渡すことで、jQuery の.css()メソッドの短縮形を使用できます。また、これらの 2 つの異なるスタイルを繰り返すのではなく、変数に入れる必要があります。コードをより DRY にするためにあらゆることを行います。

ワンライナーで：

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

ただし、あなたのIDはあまり規則的ではないようですので、（重複の可能性がある）100万の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 を設定する必要はありません。また、visibilityjQuery の.hide()/を使用する場合.show()は、非ブロック要素でも機能します。

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

Answer 3

これらの 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;
}

コードを減らすためにできるもう 1 つのことは、jQuery のshow()and関数を使用して、要素を非表示および表示することです:) andプロパティhide()を明示的に設定する必要はありません。displayvisibility

参照 -

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

Answer 4

whichToCheck の値に基づいて ID を生成し、jQuery の hide メソッドを使用して要素を非表示にすることができます。

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

whichToCheck と対応する入力要素を関数に渡します。

Answer 5

1. アーメルが述べたように、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();
    }

Answer 6

whichToCheckコードを短くする鍵は、変数のソースのようです。または、これを行うことができます：

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

Answer 7

これはCSSを設定する方が良いです:

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

Answer 8

addClass手始めに、css クラスを作成し、jQueryで関数を使用できます。

例:

CSS

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

jQuery

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

Answer 9

コードを書いたとき

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

スタイルの変更のためにいくつかの場所で繰り返します。エラーフィールド名を渡すような関数にできますか？

パラメータを 3 として渡し、#error3次に表示パラメータと可視性パラメータを渡します。

ありがとう