Question

我希望应用程序以这种方式运行，以便在我点击＆＃34; Show Order＆＃34;如果任何值为0或空白，我不希望显示div id item * x：

＆＃13;

var divs = document.getElementsByTagName('div');

var toggle = function() {
  for (var i = 0, l = divs.length; i < l; i++) {
    if (divs[i].getAttribute('class') == 'problem')
      if (divs[i].style.display == 'none') divs[i].style.display = '';
      else divs[i].style.display = 'none';
    var x = document.getElementById("mySelect").value;
    var y = document.getElementById("item1").value;
    if (x < 1) {
      y.style.display === "none"
    } else {
      document.getElementById("demo").innerHTML = x;
    }
    var x = document.getElementById("mySelect1").value;
    document.getElementById("demo1").innerHTML = x;
    var x = document.getElementById("mySelect2").value;
    document.getElementById("demo2").innerHTML = x;
  }
}

document.getElementById('Toggle').onclick = toggle;

＆＃13;

<div class="problem">
  <div class="row">
    <div class="col-3">
      <form>
        <input type="number" id="mySelect" name="mySelect" autocomplete="off" style="width: 3em;"> Sausage
        <br>
      </form>
    </div>
    <div class="col-3">
      <form>
        <input type="number" id="mySelect1" name="mySelect1" autocomplete="off" style="width: 3em;"> Pancake
        <br>
      </form>
    </div>
    <div class="col-2">
      <form>
        <input type="number" id="mySelect2" name="mySelect2" autocomplete="off" style="width: 3em;"> Milk
      </form>
    </div>
    <div class="col-4">
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <p>
        <button type="button" class="button" id="Toggle" onclick="myFunction()">Show Order</button>
      </p>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-12">
    <div style="display:none;" class="problem">Please show this to the cashier.</div>

    <div style="display:none;" class="problem">
      <h2>Hello, they ordered:</h2>
    </div>
    <div id="item1" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo"></span>x&nbsp;Sausage(s)</h2>
    </div>
    <div id="item2" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo1"></span>x&nbsp;Pancake(s)</h2>
    </div>
    <div id="item3" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo2"></span>x&nbsp;Cup of Milk(s)</h2>
    </div>
    <div style="display:none;" class="problem">
      <h2>Thank you</h2>
    </div>

    <div style="display:none;" class="problem">Please refresh your browser to restart your order</div>
  </div>
</div>

＆＃13;

我在这里添加了JSFiddle的完整代码。

Answer 1

检查这种更简单的方法

将div的显示类设为要切换的div
检查输入值是否为>= 1

<强>演示

var toggle = function() {
  var x1 = Number(document.getElementById("mySelect").value);
  var x2 = Number(document.getElementById("mySelect1").value);
  var x3 = Number(document.getElementById("mySelect2").value);
  document.querySelectorAll(".display .problem").forEach(function(el) {
    el.style.display = x1 >= 1 || x2 >= 1 || x3 >= 1 ? "block" : "none";
  });
  document.getElementById("demo").innerHTML = (x1 || 0);
  document.getElementById("demo1").innerHTML = (x2 || 0);
  document.getElementById("demo2").innerHTML = (x3 || 0);
}

document.getElementById('Toggle').onclick = toggle;

<div class="problem">
  <div class="row">
    <div class="col-3">
      <form>
        <input type="number" id="mySelect" name="mySelect" autocomplete="off" style="width: 3em;"> Sausage
        <br>
      </form>
    </div>
    <div class="col-3">
      <form>
        <input type="number" id="mySelect1" name="mySelect1" autocomplete="off" style="width: 3em;"> Pancake
        <br>
      </form>
    </div>
    <div class="col-2">
      <form>
        <input type="number" id="mySelect2" name="mySelect2" autocomplete="off" style="width: 3em;"> Milk
      </form>
    </div>

    <div class="col-4">
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <p>
        <button type="button" class="button" id="Toggle" onclick="myFunction()">Show Order</button>
      </p>
    </div>
  </div>

</div>

<div class="row display">
  <div class="col-12">
    <div style="display:none;" class="problem">Please show this to the cashier.</div>

    <div style="display:none;" class="problem">
      <h2>Hello, they ordered:</h2>
    </div>
    <div id="item1" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo"></span>x&nbsp;Sausage(s)</h2>
    </div>
    <div id="item2" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo1"></span>x&nbsp;Pancake(s)</h2>
    </div>
    <div id="item3" style="display:none;" class="problem">
      <h2><span style="font-size: xx-large; color: green;" id="demo2"></span>x&nbsp;Cup of Milk(s)</h2>
    </div>
    <div style="display:none;" class="problem">
      <h2>Thank you</h2>
    </div>

    <div style="display:none;" class="problem">Please refresh your browser to restart your order</div>
  </div>
</div>

Answer 2

您可以使用class="problem"遍历所有div并检查其input的值。如果没有，那么就不要表现出来。如果它不是空的，请显示它。

您可以使用var allDivs = querySelectorAll('.problem input');来获取div中的输入（因为我们知道它们有class="problem"），然后遍历它并使用if来检查allDivs[i].value。

我不想直接提供代码，所以希望这有助于回答您的问题！

Answer 3

你在这里：

`https://jsfiddle.net/1znqk6us/1/`

我已经删除了按钮上的onlick事件，因为你没有使用它，并且for循环。

如果值小于1，则隐藏div

3 个答案: