javascript - 附加和分离动态创建的输入

Question

我有两个单选按钮:

• fixed_price_option (默认选中。)
• variable_price_option (默认情况下禁用)

我还有两种类型的输入:

• fixed_price_input (默认情况下可见。只出现一次。)
• variable_price_input (不存在于代码中，因为它必须动态添加。出现一次或多次。)

当 fixed_price_option选择了一个名为 fixed_price_input 的输入应该可见并在稍后运行 .serialize() 时包含在内。

当 fixed_price_option被选中否variable_price_input稍后运行 .serialize() 时应该可见或包括在内。

variable_price_option仅当两个日期输入之间的差异超过 12 个月时才可选择。 (这个我已经解决了)

当 variable_price_option被选中应该还有一个 variable_price_input可见，因为两个日期输入之间有整年(即 durationMonths + 1)。稍后运行 .serialize() 时也需要包含它们，因此它们需要具有类似 price_year_1 的名称, price_year_2 , price_year_3依此类推，具体取决于两个日期输入之间的整年数。

当 variable_price_option已选中 fixed_price_input稍后运行 .serialize() 时不应显示或包含在内。

我已经提供了代码。缺少的逻辑需要放在js代码底部的事件处理器中。

关于如何解决这个问题有什么建议吗？

-- 更新--

我的问题需要澄清:

我正在努力解决的问题是根据选中的单选按钮切换两种输入类型(fixed_price_input 和 variable_price_input)的存在。隐藏/显示它们是不够的，因为我稍后会使用 .serialize() 。我应该以某种方式使用 .detach() 和 .append() 吗？

我也在纠结如何再创建一个 variable_price_input比开始日期和结束日期之间的年数还要多。我应该使用 <template> 吗？或者 .clone() 以某种方式？

$(document).ready(function() {

  $("#inputStartDate, #inputEndDate").change(function() {

    if ($('#inputStartDate').val() && $('#inputEndDate').val()) {

      var startDate = moment($('#inputStartDate').val());
      var endDate = moment($('#inputEndDate').val());

      var durationMonths = endDate.diff(startDate, 'months');

      $('#durationMonths').text(durationMonths);
      
      var durationYears = endDate.diff(startDate, 'years');
    
      $('#durationYears').text(durationYears);

      if (duration > 12) {
        $('#variablePriceOption').prop("disabled", false);
      } else {
        $('#variablePriceOption').prop("disabled", true);
      }

    }


  });

  $('#variablePriceOption, #fixedPriceOption').change(function() {

    if (this.value == 'fixedPrice') {
      //Logic needed
    } else if (this.value == 'variablePrice') {
      //Logic needed
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="container">

  <div class="row mt-3">
    <div class="col">
      <div class="form-group">
        <label for="inputStartDate">Start date</label>
        <input type="date" class="form-control" id="inputStartDate" name="land_contract_start_date">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label for="inputEndDate">End date</label>
        <input type="date" class="form-control" id="inputEndDate" name="land_contract_end_date">
      </div>
    </div>
  </div>

  <div class="text-center">Months between selected dates = <span id="durationMonths"></span>. Years between selected dates = <span id="durationYears"></span>.
  </div>

  <div class="form-group">
    <label for="inputPriceModel">Price model</label>
    <div id="inputPriceModel">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="inputPriceModel" id="fixedPriceOption" value="fixedPrice" required checked="checked">
        <label class="form-check-label" for="fixedPriceOption">
          Fixed price
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="inputPriceModel" id="variablePriceOption" value="variablePrice" disabled="disabled">
        <label class="form-check-label" for="variablePriceOption">
          Variable price
        </label>
      </div>
    </div>
  </div>

  <div class="form-group fixedPriceModelFormGroup">
    <label for="fixed_price_input">Fixed price amount</label>
    <div class="input-group">
      <input type="number" class="form-control" id="fixed_price_input" name="land_contract_fixed_annual_price">
      <div class="input-group-append">
        <span class="input-group-text">$</span>
      </div>
    </div>
  </div>

</div>

Answer 1

这应该有助于您开始了解可变定价输入，显示日历日期的每个 # 年差异。该代码可以分解为其他函数来处理元素的显示/隐藏等。您需要移动您的 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>。在其他 JS 引用之上添加代码，以消除您看到的 bootstrap 错误.

此外，您的 duration变量应该是 durationMonths用于比较 > 12，如 duration是undefined . durationYears应该移到change之外日历日期的功能，以便您可以在其他处理功能中引用它。我添加了 Math.abs()到日期计算，以确保您处理的是正整数以进行比较。

使用 disabled inputs 上的属性隐藏的将允许您序列化可见的 form数据并确保您不会获得隐藏的输入(可变定价字段等)作为 serialization 的一部分数据。

正如@Twisty 在您帖子的评论中提到的，您需要使用 .detach()或者，如果您在固定/可变选项( localStorage 、 sessionStorage 也是存储数据的选项)之间来回切换，则可以通过某种方式存储可变定价输入值，如果您想维护变量中的任何值/固定 inputs .您将需要删除 .empty()如果您打算存储输入的数据值，我的示例中的输入字段也是如此。

循环函数handleVariablePricing为了确定应显示多少可变定价输入，需要挂接到存储的数据功能，以确保您使用先前输入的值创建相同数量的字段，而不是在现有字段/值之上添加额外的新字段。

$(document).ready(function() {

  var durationYears = 0;

  $("#inputStartDate, #inputEndDate").change(function() {

    if ($('#inputStartDate').val() && $('#inputEndDate').val()) {

      var startDate = moment($('#inputStartDate').val());
      var endDate = moment($('#inputEndDate').val());

      var durationMonths = Math.abs(endDate.diff(startDate, 'months'));
      $('#durationMonths').text(durationMonths);

      // maintain value outside of change function
      durationYears = Math.abs(endDate.diff(startDate, 'years'));
      $('#durationYears').text(durationYears);

      if (durationMonths > 12) {
        $('#variablePriceOption').prop("disabled", false);
      } else {
        $('#variablePriceOption').prop("disabled", true);
      }

      // If dates changed, update variable inputs shown
      if ($('#variablePriceOption').is(':checked')) {
        if (durationMonths > 12) {
          $('#variable_price_input_1').val('');
          $('.duration-years-input').remove();
          handleVariablePricing();
        } else {
          $('#fixedPriceOption').click();
        }
      }
    }

  });

  $('#variablePriceOption, #fixedPriceOption').change(function() {

    if (this.value == 'fixedPrice') {

      $('.variablePriceModelFormGroup').removeClass('d-block').addClass('d-none');
      $('.variablePriceModelFormGroup input').each(function() {
        $(this).val('').attr('disabled', true);
      });
      $('.fixedPriceModelFormGroup input').prop('disabled', false);
      $('.fixedPriceModelFormGroup').removeClass('d-none').addClass('d-block');
      $('.duration-years-input').remove();

    } else if (this.value == 'variablePrice') {

      $('.fixedPriceModelFormGroup').removeClass('d-block').addClass('d-none');
      $('.fixedPriceModelFormGroup input').val('').attr('disabled', true);
      $('#variable_price_input_1').prop('disabled', false);
      $('.variablePriceModelFormGroup').removeClass('d-none').addClass('d-block');

      handleVariablePricing();

    }

  });

  /**
   * Creates inputs for variable pricing..
   **/
  var handleVariablePricing = function() {
    $rowClone = $('.row-main').clone();
    for (var i = 2; i <= durationYears + 1; i++) {
      $rowClone.prop('class', 'duration-years-input');
      $rowClone.find('label').text('Price Year ' + i);
      $rowClone.find('input').prop('id', 'variable_price_input_' + i);
      $rowClone.find('input').prop('name', 'land_contract_variable_annual_price_' + i);
      if ($('.duration-years-input').length === 0) {
        $('.row-main').after($rowClone);
      } else {
        $('.duration-years-input').last().after($rowClone);
      }
      $rowClone = $('.duration-years-input').last().clone();
    }
  };

  $('button').click(function() {
    console.log($('#test-form').serialize());
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="container">
  <form id="test-form">
    <div class="row mt-3">
      <div class="col">
        <div class="form-group">
          <label for="inputStartDate">Start date</label>
          <input type="date" class="form-control" id="inputStartDate" name="land_contract_start_date">
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="inputEndDate">End date</label>
          <input type="date" class="form-control" id="inputEndDate" name="land_contract_end_date">
        </div>
      </div>
    </div>
    <div class="text-center">Months between selected dates = <span id="durationMonths"></span>. Years between selected dates = <span id="durationYears"></span>.
    </div>
    <div class="form-group">
      <label for="inputPriceModel">Price model</label>
      <div id="inputPriceModel">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="inputPriceModel" id="fixedPriceOption" value="fixedPrice" required checked="checked">
          <label class="form-check-label" for="fixedPriceOption">
          Fixed price
        </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="inputPriceModel" id="variablePriceOption" value="variablePrice" disabled="disabled">
          <label class="form-check-label" for="variablePriceOption">
          Variable price
        </label>
        </div>
      </div>
    </div>
    <div class="form-group fixedPriceModelFormGroup">
      <label for="fixed_price_input">Fixed price amount</label>
      <div class="input-group">
        <input type="number" class="form-control" id="fixed_price_input" name="land_contract_fixed_annual_price">
        <div class="input-group-append">
          <span class="input-group-text">$</span>
        </div>
      </div>
    </div>
    <div class="form-group variablePriceModelFormGroup d-none">
      <div class="row-main">
        <label for="variable_price_input">Price Year 1</label>
        <div class="input-group">
          <input type="number" class="form-control" id="variable_price_input_1" name="land_contract_variable_annual_price_1" disabled="disabled">
          <div class="input-group-append">
            <span class="input-group-text">$</span>
          </div>
        </div>
      </div>
    </div>
  </form>
  <button>Serialize</button>
</div>