javascript - 使用jquery根据4个输入的总和设置数字输入最大值

Question

我有 4 个输入字段，我需要所有字段的总数不超过 100。我想设置要更改的字段的最大值。

我一直在尝试调整 keyup() 上的值，然后将其他字段的总数与当前字段相差并设置最大值。似乎工作了一点然后停止。

JSfiddle example

var $fieldA = $('#acf-field_55dc6669f5235');
var $fieldB = $('#acf-field_55dc6699f5236');
var $fieldC = $('#acf-field_55dc66d3f5237');
var $fieldD = $('#acf-field_55dc6713f5238');
var total;

function getTotal() {
   total = parseInt($fieldA.val()) + parseInt($fieldB.val()) +      parseInt($fieldC.val()) + parseInt($fieldD.val());
}
$fieldA.change(function () {
   $this = $(this);
   var input = parseInt($this.val());

   var otherFields = parseInt($fieldB.val()) + parseInt($fieldC.val()) + parseInt($fieldD.val());
   var max = 100 - otherFields;

   $this.attr("max", max);
});
$fieldB.change(function () {
   $this = $(this);
   var input = parseInt($this.val());

   var otherFields = parseInt($fieldA.val()) + parseInt($fieldC.val()) + parseInt($fieldD.val());
   var max = 100 - otherFields;

   $this.attr("max", max);
});
$fieldC.keyup(function () {
    $this = $(this);
    var input = parseInt($this.val());

    var otherFields = parseInt($fieldA.val()) + parseInt($fieldB.val()) + parseInt($fieldD.val());
    var max = 100 - otherFields;

    $this.attr("max", max);

});
$fieldD.change(function () {
   $this = $(this);
   var input = parseInt($this.val());

   var otherFields = parseInt($fieldA.val()) + parseInt($fieldB.val()) + parseInt($fieldC.val());
   var max = 100 - otherFields;

   $this.attr("max", max);
});
getTotal;

Answer 1

我是这样做的，详情请看代码中的注释:

$('.acf-is-appended').focus(function(){
   $(this).val('');  // clear the current input when it is focused
   var total = 0; // create a var to track the current total
   $('.acf-is-appended').each(function(){  // loop through each element
       total = total + Number($(this).val()); // add the current value to the running total
      $(this).attr('max', Number($(this).val())); // set each element's max to the currently held value
   });
   var remaining = 100 - total; // figure out how much is left before you hit 100
   $(this).attr('max', remaining); // set the max on the current element to match the remaining limit
});

// that will handle the stepper, note that the max wont prevent the user typing in a value higher than the limit
// if you want, you can also make it so typing in a greater value will default to the max value
$('.acf-is-appended').keyup(function(){
    if(Number($(this).val()) > Number($(this).attr('max'))){
        $(this).val($(this).attr('max'))
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="acf-field_55dc6669f5235" class="acf-is-appended" min="" max="100" step="any" name="acf[field_55dc6669f5235]" value="30" placeholder="" type="number">
</div>
<div class="acf-input-wrap">
  <input id="acf-field_55dc6699f5236" class="acf-is-appended" min="" max="100" step="any" name="acf[field_55dc6699f5236]" value="5" placeholder="" type="number">
</div>
<div class="acf-input-wrap">
  <input id="acf-field_55dc66d3f5237" class="acf-is-appended" min="" max="100" step="any" name="acf[field_55dc66d3f5237]" value="15" placeholder="" type="number">
</div>
<div class="acf-input-wrap">
  <input id="acf-field_55dc6713f5238" class="acf-is-appended" min="" max="100" step="any" name="acf[field_55dc6713f5238]" value="50" placeholder="" type="number">
</div>