Question

我正在尝试制作一个简单的计算器，但是我被困住了；我需要隐藏一些元素。我的代码显示在下面，并带有注释。

function ekogroszek() {
  var p = document.getElementById("powierzchnia").value;
  var w = document.getElementById("wysokosc").value;
  var k = p * w;
  var e = 7.8;
  var s = k * e;
  document.getElementById("wynik").innerHTML = s;
}


$('#wysokosc').keypress(function(event) {
  if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
}).on('paste', function(event) {
  event.preventDefault();
});

$('#powierzchnia').keypress(function(event) {
  if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
}).on('paste', function(event) {
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>First field</span>
  <input class="polekalkulacji" type="text" id="powierzchnia" name="powierzchnia" placeholder="np. 120">
</div>

<div>
  <span>Second</span>
  <input class="polekalkulacji" type="text" id="wysokosc" name="wysokosc" placeholder="np. 2.8">
</div>

<button onclick="ekogroszek()">Calculate</button>

<!--- Show below elements only if number (p id=wynik) is bigger than: "0" and field is filled --->
<p id="zapotrzebowanie">Result is:</p>
<p type="text" id="wynik"></p>

因此，如您所见，仅当id = wynik被填充且大于0时，我才需要显示这两个“ p”元素。我将如何去做？

Answer 1

如果您的目标是保持隐藏状态，直到在其上写入任何内容，并且其值也大于0，则实现此目标的最佳方法是默认情况下使用以下方法隐藏它们：

<p id="zapotrzebowanie" style="display: none;">Result is:</p>
<p type="text" id="wynik" style="display:none;"></p>

当您向它们编写HTML时，请使用jQuery显示它们：

function ekogroszek() {
  var p = $("#powierzchnia").val();
  var w = $("#wysokosc").val();
  var k = p * w;
  var e = 7.8;
  var s = k * e;
  document.getElementById("wynik").innerHTML = Math.trunc(s);
  if(s>0){
    $("#zapotrzebowanie").show();
    $("#wynik").show();
  }
}

您可以在此小提琴中检查代码的工作版本：

https://jsfiddle.net/0arcxze4/2/

Answer 2

为什么不简单地检查该值：

if($(this).val() == '0' || $(this).val() == '' ) {
  $('#wynik').hide();
}

您可以使用jquery进行显示，并在初始阶段使用CSS隐藏html元素。但是我看到您是在计算后显示它们的？那没关系。

但是，如果您想要更困难的方法，那就是：

$('#wynik').css('display', function(i, v) {
  return ($(this).text() == '0' || $(this).text() == '') ? 'none' : 'block'
});

如果innerHTML为“ 0”或为空，则隐藏<p>元素

2 个答案: