Question

<!--js-->
 function changeValue(dropdown,source) {
 var option = dropdown.options[dropdown.selectedIndex].value;
if (option == '1' && source==0) {



    var total = 20;
$("span").text(total);
$('.balance').attr({"min":0, "max":total}).on('input', function() {
  var value = parseInt(this.value);
  var otherInputs = $('.balance').not(this);
  var remainderDiv;
  var remainder, sum;
  if (isNaN(value)) {
    value = 0;
  } else if (value > total) {
    value = total;
  } else if (value < 0) {
    value = 0;
  }
  this.value = value;
  remainder = total - value;
  remainderDiv = remainder / otherInputs.length;
  sum = value;
  $.each(otherInputs, function(input) {
    sum += Number(otherInputs[input].value);
  });
  if (sum > total) {
    otherInputs.val(remainderDiv);
  }
});
}

    else if (option == '2' && source==0) {

      var total = 20;
$("span").text(total);
$('.balance').attr({"min":0, "max":total}).on('input', function() {
  var value = parseInt(this.value);
  var otherInputs = $('.balance').not(this);
  var remainderDiv;
  var remainder, sum;
  if (isNaN(value)) {
    value = 0;
  } else if (value > total) {
    value = total;
  } else if (value < 0) {
    value = 0;
  }
  this.value = value;
  remainder = total - value;
  remainderDiv = remainder / otherInputs.length;
  sum = value;
  $.each(otherInputs, function(input) {
    sum += Number(otherInputs[input].value);
  });
  if (sum > total) {
    otherInputs.val(remainderDiv);
  }
});

    }


<!--html-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeValue(this,0)">
 <option value="1">1-person</option>
 <option value="2">2-10 group</option>
</select>


<input type="number" class="balance">
<input type="number" class="balance">

<!--html-->

你怎么做，其余部分不会进入输入字段2。但是当用户输入值时，它应该仍然相互减去。所以如果max = 10。当用户在第一个字段中输入5并在第二个字段中输入零是正确的。但是，如果他将第5场和第2场中的5投入，那将是不正确的。我怎么能用这段代码呢。

Answer 1

更新：使用下拉菜单控制全局MAX变量：

＆＃13;

var MAX = 1;

function changeMax(dropdown) {
  switch (dropdown.selectedIndex) {
    case 0:
      MAX = 1;
      break;
    case 1:
      MAX = 10;
      break;
  }
}

$('.balance').on('input', function() {
  var inputs       = $(".balance");
  var currentInput = $(this);
  var otherInput   = null;
  for (var i = 0; i < inputs.length; i++) {
    if (!$(inputs[i]).is($(this))) {
      otherInput = $(inputs[i]);
    }
  }
  var currentValue = parseInt(currentInput.val(), 10);
  var otherValue   = parseInt(otherInput.val(), 10);
  if (isNaN(otherValue)) {
    otherValue = 0;
  }
  // disable entering "0000.."
  if (isNaN(currentValue)) {
    currentValue = 0;
    currentInput.val(0);
  }
  // disable entering negative values
  if (currentValue < 0) {
    currentValue = 0;
    currentInput.val(0);
  }
  var sum = currentValue + otherValue;
  if (sum > MAX) {
    var offset = sum - MAX;
    currentInput.val(currentValue - offset);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeMax(this)">
  <option value="1">1-person</option>
  <option value="2">2-10 group</option>
</select>


<input type="number" class="balance">
<input type="number" class="balance">

＆＃13;

我尽量保持尽可能简单。

MAX设置为10。如果您在第一个输入上输入2，则可以在另一个输入上输入[0,1,2,3,4,5,6,7,8]。您也可以输入负值。如果您不想，只需取消注释评论的部分。

＆＃13;

var MAX = 10;

$('.balance').on('input', function() {
  var inputs       = $(".balance");
  var currentInput = $(this);
  var otherInput   = null;
  for (var i = 0; i < inputs.length; i++) {
    if (!$(inputs[i]).is($(this))) {
      otherInput = $(inputs[i]);
    }
  }
  var currentValue = parseInt(currentInput.val(), 10);
  var otherValue   = parseInt(otherInput.val(), 10);
  if (isNaN(otherValue)) {
    otherValue = 0;
  }
  /* if (currentValue < 0) {
  	currentValue = 0;
    currentInput.val(0);
  } */
  var sum = currentValue + otherValue;
  if (sum > MAX) {
    var offset = sum - MAX;
    currentInput.val(currentValue - offset);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="balance">
<input type="number" class="balance">

＆＃13;

平衡两个输入数字字段但不显示jquery中字段中的值

1 个答案: