Jquery - 配列ループの繰り返しを使用してコードを動的に＆クリーンにする方法

Question

値が入力された場合は、フォーム提出用にHTML/JSを作成します。これは正常に動作します。

しかし、コードは単純なフォーム提出のために非常に長く見えます。このように、6つの場所を追加する必要があります。コードはこの機能のために300行を超えています。 As、各容器のIDは異なります。各要素のID名を複製して変更するだけです。

この機能をこの既存のものよりもクリーンにするための手引きやご意見をお寄せください。

おかげ

HTML：

<div class="container location-container multi-cityTrip--Container"> 
    <div class="row" id="multicity-selection--1"> 
     <div class="col-lg-4 col-md-4 col-sm-4 multicity-fromlocation--one form-validate"> 
     <div class="multicity-form--title">From</div> 
     <select class="select form-control input-lg multi-location" id="multiCityFromLocationOne" name="multiCityfromLocation1" data-multidepartloc1="Departure airport Location1 is missing" data-multideptDestLoc1="Departure1 and Destination1 Locations are same"></select> 
     </div> 
     <div class="col-lg-1 col-md-1 col-sm-1 one-direction"><i class="fa fa-plane from-direction" aria-hidden="true"></i></div> 
     <div class="col-lg-4 col-md-4 col-sm-4 multicity-tolocation--one form-validate"> 
     <div class="multicity-form--title">To</div> 
     <select class="select form-control input-lg multi-location" id="multiCityToLocationOne" name="multiCitytoLocation1" data-multidestloc1="Destination airport Location1 is missing" data-multideptDestLoc1="Departure1 and Destination1 Locations are same"></select> 
     </div> 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
     <div class="book-date--selector"> 
      <div class="col-lg-12 col-md-12 col-sm-12 form-validate"> 
      <div class="booking-form--title one"> 
       <div class="multi-dep-title">Departure</div> 
      </div><i class="fa fa-calendar" aria-hidden="true"></i> 
      <input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" data-multitraveldate1="Departure date 1 is missing" readonly="true"> 
      </div> 
     </div> 
     </div> 
     <div class="col-lg-1 col-md-1 col-sm-1 remove-flight"></div> 
    </div> 
    <div class="row" id="multicity-selection--2"> 
     <div class="col-lg-4 col-md-4 col-sm-4 multicity-fromlocation--two form-validate"> 
     <div class="multicity-form--title">From</div> 
     <select class="select form-control input-lg multi-location" id="multiCityFromLocationTwo" name="multiCityfromLocation2" data-multidepartloc2="Departure airport Location2 is missing" data-multideptDestLoc2="Departure2 and Destination2 Locations are same"></select> 
     </div> 
     <div class="col-lg-1 col-md-1 col-sm-1 one-direction"><i class="fa fa-plane from-direction" aria-hidden="true"></i></div> 
     <div class="col-lg-4 col-md-4 col-sm-4 multicity-tolocation--two form-validate"> 
     <div class="multicity-form--title">To</div> 
     <select class="select form-control input-lg multi-location" id="multiCityToLocationTwo" name="multiCitytoLocation2" data-multidestloc2="Destination airport Location2 is missing" data-multideptDestLoc2="Departure2 and Destination2 Locations are same"></select> 
     </div> 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
     <div class="book-date--selector"> 
      <div class="col-lg-12 col-md-12 col-sm-12 form-validate"> 
      <div class="booking-form--title two"> 
       <div class="multi-dep-title">Departure</div> 
      </div><i class="fa fa-calendar" aria-hidden="true"></i> 
      <input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" data-multitraveldate2="Departure date 2 is missing" readonly="true"> 
      </div> 
     </div> 
     </div> 
     <div class="col-lg-1 col-md-1 col-sm-1 remove-flight"></div> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-lg-1 col-md-1 col-sm-1"> 
    <button class="btn btn-primary" id="multiSearchForm" type="submit">Find flights</button> 
    </div> 
</div> 

JS：まず

$('#multiSearchForm').click(function (et) { 
    var $error = []; 
    et.preventDefault(); 
    $('.error-validation').show(); 
    /* Multi city location 1 */ 
    if ($('#multiCityFromLocationOne').val() == '') { 
     $('select#multiCityFromLocationOne').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityFromLocationOne').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityFromLocationOne = $('#multiCityFromLocationOne').attr('data-multidepartloc1'); 
     $error.push($multiCityFromLocationOne); 
    } 
    else { 
     $('select#multiCityFromLocationOne').parent().find('.selectize-control .selectize-input').removeClass('has-error'); 
     $('select#multiCityFromLocationOne').parent().find('.multicity-form--title').removeClass('has-error'); 
    } 
    if ($('#multiCityToLocationOne').val() == '') { 
     $('select#multiCityToLocationOne').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityToLocationOne').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityToLocationOne = $('#multiCityToLocationOne').attr('data-multidestloc1'); 
     $error.push($multiCityToLocationOne); 
    } 
    else { 
     $('select#multiCityToLocationOne').parent().find('.selectize-control .selectize-input').removeClass('has-error'); 
     $('select#multiCityToLocationOne').parent().find('.multicity-form--title').removeClass('has-error'); 
    } 
    if ($('#multiCityFromLocationOne').val() === $('#multiCityToLocationOne').val()) { 
     $('select#multiCityToLocationOne').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityToLocationOne').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityFromToLocationOne = $('#multiCityToLocationOne').attr('data-multideptDestLoc1'); 
     $error.push($multiCityFromToLocationOne); 
    } 
    if ($('#multiCityTripInputOne').val() == '') { 
     $('#multiCityTripInputOne').parent().parent().addClass('has-error'); 
     var $multiTravelDate1 = $('#multiCityTripInputOne').attr('data-multitraveldate1'); 
     $error.push($multiTravelDate1); 
    } 
    else { 
     $('#multiCityTripInputOne').parent().parent().removeClass('has-error'); 
    } 
    /* Multi city location 2 */ 
    if ($('#multiCityFromLocationTwo').val() == '') { 
     $('select#multiCityFromLocationTwo').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityFromLocationTwo').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityFromLocationTwo = $('#multiCityFromLocationTwo').attr('data-multidepartloc2'); 
     $error.push($multiCityFromLocationTwo); 
    } 
    else { 
     $('select#multiCityFromLocationTwo').parent().find('.selectize-control .selectize-input').removeClass('has-error'); 
     $('select#multiCityFromLocationTwo').parent().find('.multicity-form--title').removeClass('has-error'); 
    } 
    if ($('#multiCityToLocationTwo').val() == '') { 
     $('select#multiCityToLocationTwo').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityToLocationTwo').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityToLocationTwo = $('#multiCityToLocationTwo').attr('data-multidestloc2'); 
     $error.push($multiCityToLocationTwo); 
    } 
    else { 
     $('select#multiCityToLocationTwo').parent().find('.selectize-control .selectize-input').removeClass('has-error'); 
     $('select#multiCityToLocationTwo').parent().find('.multicity-form--title').removeClass('has-error'); 
    } 
    if ($('#multiCityFromLocationTwo').val() === $('#multiCityToLocationTwo').val()) { 
     $('select#multiCityToLocationTwo').parent().find('.selectize-control .selectize-input').addClass('has-error'); 
     $('select#multiCityToLocationTwo').parent().find('.multicity-form--title').addClass('has-error'); 
     var $multiCityFromToLocationTwo = $('#multiCityToLocationTwo').attr('data-multideptDestLoc2'); 
     $error.push($multiCityFromToLocationTwo); 
    } 
    if ($('#multiCityTripInputTwo').val() == '') { 
     $('#multiCityTripInputTwo').parent().parent().addClass('has-error'); 
     var $multiTravelDate2 = $('#multiCityTripInputTwo').attr('data-multitraveldate2'); 
     $error.push($multiTravelDate2); 
    } 
    else { 
     $('#multiCityTripInputTwo').parent().parent().removeClass('has-error'); 
    } 
} 

Answer 1

、あなたがエラーを呼んで統合します。 1つのエラー属性があります。 「エラー」と同じです。それは多くの行を削減します。次に、潜在的な書き換えがあります。すべての選択とすべての入力をループし、必要に応じてエラーを追加します。 hasError1とhasError2のより良い名前を考えるべきです。 （私はあなたのコードのコンテキストを知らないので、私はそれを自分で行うことができませんでした。）

<script> 
$('#multiSearchForm').click(function (et) { 
    var $error = []; 
    et.preventDefault(); 
    $('.error-validation').show(); 
    $(".container input, .container selector").each(function() { 
     hasError1 = (this).parent().find('.selectize-control .selectize-input'); 
     hasError2 = (this).parent().find('.multicity-form--title'); 
     if ($(this).val() === '') { 
      hasError1.addClass('has-error'); 
      hasError2.addClass('has-error'); 
      $error.push($(this).attr('error')); 
     } else { 
      hasError1.removeClass('has-error'); 
      hasError2.removeClass('has-error'); 
     } 
    }); 
}); 
</script> 

（サイドノート：あなたもあなたには、いくつかを投稿することができれば、HTMLを統合しようとしている場合CSSのコンテキスト、私もそれを見ていきます）。