根據輸入字段的數值隱藏或顯示不同的 DIV

Question

我有一個表單，根據 #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>

Answer 1

您可以使用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>