Question

我有两个单选按钮：

fixed_price_option（默认情况下已选择。）
variable_price_option（默认为禁用）

我也有两种输入类型：

fixed_price_input（默认情况下可见。仅出现一次。）
variable_price_input（由于必须动态添加，因此不存在于代码中。一个或多个事件。）

当选择fixed_price_option时，应该可以看到一个名为fixed_price_input的输入，并在以后运行.serialize（）时将其包括在内。

选择fixed_price_option时，以后运行.serialize（）时，variable_price_input都不可见或不包含。

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引用上方，以消除{{1 }}。

另外，您的bootstrap变量应为duration以比较> 12，因为durationMonths为duration。 undefined应该移到日历日期的durationYears函数之外，以便可以在其他处理函数中引用它。我在日期计算中添加了change，以确保您使用正整数进行比较。

使用隐藏的Math.abs()上的disabled属性将使您可以序列化可见的inputs数据，并确保您不会获取隐藏的输入（可变定价字段等）作为form数据的一部分。

正如@Twisty在帖子评论中提到的那样，如果您在固定/可变选项之间切换（{{ 1}}，serialization也是用于存储数据的选项），如果您想保留放置在变量/固定.detach()中的任何值。如果要存储输入的数据值，则在我的示例中，也需要删除输入字段上的localStorage用法。

用于确定应显示多少可变定价输入的循环函数sessionStorage需要与存储的数据功能挂钩，以确保您使用以前输入的值创建相同数量的字段，而不添加其他新字段在现有字段/值的顶部。

inputs

.empty()

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

1 个答案: