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

Question

Hey I would like to know how to show a div and hide another at the same time. And that it only does that when I give an input of 5 or higher :

<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>

this needs to show: <div id="testje" class="CalculatorRight" style="display:none">

This needs to hide: <div id="SummaryHTML" class="CalculatorRight">

The code I use now that only focuses on input and not on input's value:

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

Answer 1

You can use the current value and check using 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> 

Answer 2

try below solution.

 $('#FenceMeters').on("change paste keyup", function() { var val = $(this).val(); if (val >= 5) { $('#testje').show(); $('#SummaryHTML').hide(); } else { $('#testje').hide(); $('#SummaryHTML').show(); } }); 

 .hidden { display: none; } .CalculatorRight { border: 1px solid red; } 

 <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 hidden"> testje </div> <br/> <div id="SummaryHTML" class="CalculatorRight">SummaryHTML </div> 

Answer 3

You can use like below,

   $('#FenceMeters').on('input', function() {
     if($('#FenceMeters').val() != "" && Number($('#FenceMeters').val()) >=5){
              $('#testje').show();
              $('#SummaryHTML').hide();
     }
   });

Answer 4

Get numeric value of the input by using parseFloat , if not a number in the input use 0 as default

$('#FenceMeters').on('input', function() {
         var inputValue = parseFloat($(this).val()) || 0;
         if(inputValue>5){
                  $('#testje').show();
                  $('#SummaryHTML').hide();
         }
       });

Answer 5

No Jquery! Just vanilla javascript. Added eventListner on input keyup and changed the style for both div based on condition. Just for reference.

 let elem = document.getElementById("FenceMeters"); let testje = document.getElementById("testje"); let SummaryHTML = document.getElementById("SummaryHTML"); elem.addEventListener('keyup', function(){ if(elem.value > 5){ testje.style.display = null; SummaryHTML.style["display"] = "none"; } else{ testje.style["display"] = "none"; SummaryHTML.style["display"] = null; } }); 

 <div > <input type="number" id="FenceMeters" maxlength="3" > <div >0</div> </div> <div id="testje" style="display:none"> testje </div> <div id="SummaryHTML" > SummaryHTML </div>