时间戳

首页 > 解决方案 > Jquery根据输入值显示或隐藏元素？

javascript - Jquery根据输入值显示或隐藏元素？

问题描述

嘿，我想知道如何显示一个 div 并同时隐藏另一个。并且只有当我输入 5 或更高时它才会这样做：

<div class="InputField InputMeters">
   <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" 
          data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
   <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>

这需要表明： <div id="testje" class="CalculatorRight" style="display:none">

这需要隐藏： <div id="SummaryHTML" class="CalculatorRight">

我现在使用的代码只关注输入而不关注输入的值：

$('#FenceMeters').on('input', function() {
      $('#testje').show();
      $('#SummaryHTML').hide();
});

标签： javascriptjquery

解决方案

您可以使用当前值并使用Number.parseInt检查

$('#FenceMeters').on('input', function() {
  const value = $(this).val();
  if (Number.parseInt(value) >= 5) {
    $('#testje').show();
    $('#SummaryHTML').hide()
  } else {
    $('#testje').hide();
    $('#SummaryHTML').show()
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="InputField InputMeters">
  <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
  <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>

<div id="testje" class="CalculatorRight" style="display:none">hidden</div>

<div id="SummaryHTML" class="CalculatorRight">shown</div>

推荐阅读