根据输入字段的数值隐藏或显示不同的DIV

问题描述

我有一种形式，我希望根据#balance字段的值显示某个div。如果#balance字段的数字大于1，我想显示div #moreassets，但如果#balance字段为负数，我希望它显示div #moreliabilities。

下面的脚本以相同的形式计算两个先前字段的值，但是当我尝试为show hide函数添加更多或单独或第二个js代码时，就会卡住。

我尝试了许多方法，但似乎无法使其起作用。我不是很擅长这类事情，但是我假设我的问题可能是我已经在DOM中使用#balance或什么原因不能两次使用相同的东西？

我想知道是否有人可以指出正确的方向，或者我需要在下面的脚本/代码中添加些什么才能实现这一目标？

<label style="margin-top: 20px;">Your Balance: </label>

<input class="form-control text-center balance" id="balance" type="type" name="balance">

<script>
  $(function() {
    $('#assets2,#liabilities').change(function() {
      var yourassets = parseFloat($('#assets2').val()) || 0;
      var yourliabilities = parseFloat($('#liabilities').val()) || 0;
      $('#balance').val(yourassets - yourliabilities);
    });
  });

</script>

<div id="moreliabilities" class="callout">
  <p>Personal liabilities,such as credit cards and loans,can be expensive and you should consider making overpayments before investing.</p>
</div>

<div id="moreassets" class="callout">
  <p>You have more assets than liabilities.</p>
</div>

解决方法

您可以使用toggle并根据差值传递布尔表达式。 参见下面的代码

$(function() {
  $('#assets2,#liabilities').change(function() {
    var yourassets = parseFloat($('#assets2').val()) || 0;
    var yourliabilities = parseFloat($('#liabilities').val()) || 0;
    var diff = yourassets - yourliabilities;
    $('#balance').val(diff);
    $('#moreassets').toggle(diff>0);
    $('#moreliabilities').toggle(diff<0);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control text-center" id="assets2" type="type" name="assets2"><br>
<input class="form-control text-center" id="liabilities" type="type" name="liabilities"><br>
<label style="margin-top: 20px;">Your Balance: </label>
<input class="form-control text-center balance" id="balance" type="type" name="balance">
<div id="moreliabilities" class="callout">
  <p>Personal liabilities,such as credit cards and loans,can be expensive and you should consider making overpayments before investing.</p>
</div>

<div id="moreassets" class="callout">
  <p>You have more assets than liabilities.</p>
</div>