jquery - 如何使用數組循環迭代使下面的代碼動態和乾淨

如果輸入值，創建在HTML/JS下面的表單提交。這可以正常工作。jquery - 如何使用數組循環迭代使下面的代碼動態和乾淨

但是，代碼對於簡單表單提交看起來很長。像這樣，我們需要爲另外6個位置完成。此功能的代碼超過300行。因爲每個容器的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'); 
    } 
}

來源

2017-03-10 TDG

首先，鞏固你叫什麼你的錯誤。有一個錯誤屬性。像「錯誤」一樣。這將削減很多線路。接下來，這是一個潛在的重寫。它遍歷所有的選擇和所有輸入，並且如果需要的話會添加一個錯誤。你應該爲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的上下文，我也會看看）。

來源

2017-03-10 03:14:34 Neil

https://jsfiddle.net/jkenluv/ex63ut5t/ – TDG

嗨Neil ..謝謝你的回覆。不確定我是否需要更改一些HTML代碼來製作這個乾淨的代碼。更新我在jsfiddle.net中的所有代碼。請驗證並讓我知道。謝謝 – TDG

我問的是，如果你能將data-multidepartloc1和data-multidestloc1等全部合併成一個HTML屬性。像錯誤屬性一樣。這將使我可以使用我上面寫的非常簡單的檢查。 – Neil

jquery - 如何使用數組循環迭代使下面的代碼動態和乾淨

回答

相關問題