根据父输入字段动态生成输入字段答案

【问题标题】：Generate input fields dynamically according to parent input field根据父输入字段动态生成输入字段
【发布时间】：2021-11-13 15:56:33
【问题描述】：

我有一个简单的 HTML input 字段。当用户键入不等于 100 的值并在输入字段外单击时，会出现另一个输入字段，其中 value=100-user 插入值。

例如：如果用户在第一个输入字段中输入40，第二个输入字段显示60。如果第一个输入字段值等于100，则不会发生任何事情。我通过使用 Javascript 简单地添加和删除 CSS 类来实现这一点。

问题是我不能超过2个级别，这意味着如果用户在第一个输入字段中输入40，第二个输入字段显示60，那么如果用户将60更改为30 必须出现另一个输入字段，其值为30 等等。

如何使用 Javascript 或 jQuery 实现这一点？

(function($) {
  var minNumber = 0;
  var maxNumber = 100;

  $(".dynamic-input").on("change", function() {
    var inputVal = parseFloat($(this).val().replace("%", "")) || 0;
    
    if (minNumber > inputVal) {
      inputVal = 0;
    } else if (maxNumber < inputVal) {
      inputVal = 100;
    }
    
    if (inputVal == 100) {
      var dyn_row = document.getElementById("dynamic-row");
      dyn_row.classList.add("dynamic-row-hidden");
    } else {
      var dyn_row = document.getElementById("dynamic-row");
      dyn_row.classList.remove("dynamic-row-hidden");

      var new_val = parseFloat($(this).val());
      var dynamic_input_get_val =
        document.getElementById("dynamic-input-get");
      dynamic_input_get_val.value = 100 - new_val + "%";
    }
    $(this).val(inputVal + "%");
  });
})(jQuery);

.dynamic-row-hidden {
  display: none;
}

<input id="dynamic-input" class="dynamic-input dinput" required="required" type="text" />
<div id="dynamic-row" class="dynamic-row dynamic-row-hidden" style="margin-top: 10px">
  <div>
    <input id="dynamic-input-get" class="dynamic-input-get dinput" required="required" type="text" />
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【问题讨论】：

标签： javascript html jquery append dynamically-generated

【解决方案1】：

我猜你的意思是：

...那么如果用户将 40 更改为 30 另一个输入字段必须出现值为 30 等等

根据给定的描述，这应该可以帮助您入门：

var calculatedValue;

var dynamicInput = $('#dynamic-input');
dynamicInput.on('change', function() {
    var dynamicInputGet = $('#dynamic-input-get');
  
    if(dynamicInput.val() <= 100 && dynamicInput.val() >= 0) {
        if(!calculatedValue) {
            calculatedValue = 100 - dynamicInput.val();
            dynamicInputGet.val(calculatedValue);
        } else {
            dynamicInputGet.val(dynamicInputGet.val() - dynamicInput.val());
        }
    } else if(dynamicInput.val() < 0) {
          dynamicInput.val(0);
          dynamicInput.trigger('change');
    } else {
        dynamicInput.val(100); 
        dynamicInput.trigger('change');
    }
});

【讨论】：