Jquery - 如何使下面的代码动态＆amp;使用数组循环迭代清理

Question

如果输入值，则在HTML / JS下创建表单提交。这可以正常工作。

但是，Code对于简单的表单提交看起来很长。像这样，我们需要为另外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');
    }
}

Answer 1

首先，巩固你所谓的错误。有一个错误属性。喜欢＆＃34;错误＆＃34;。这将削减很多线。接下来，这是一个潜在的重写。它遍历所有选择和所有输入，如果需要，将添加错误。您应该考虑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上下文，我也会看一下）。