Question

嘿，我想知道如何显示一个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();
});

Answer 1

您可以使用当前值并使用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

尝试以下解决方案。

$('#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

您可以像下面这样使用

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

Answer 4

使用parseFloat获取输入的数值，如果输入中没有数字，则默认使用0

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

Answer 5

没有Jquery！只是普通的javascript。在输入eventListner上添加了keyup，并根据条件更改了两个div的样式。仅供参考。

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>

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

5 个答案: