Question

我有这个：

<input type="button" id="total_items" value="0">

该值随着项目添加到站点而增加。我需要的是将其隐藏，如果该值为0，则随着该值的增加而开始显示。

我知道JQuery可以选择添加一个CSS display：none选项，但是我不知道如何。谢谢您的帮助！

Answer 1

在下面尝试此代码，只是每次对象计数更改时，您都必须调用checkValue()函数。

var btn = $('#total_items');

$(document).ready(function() {
  checkValue();
})
btn.change(function() {
  checkValue();
});

function AddNumber(count) {
  btn.prop('value', parseInt(btn.attr('value')) + count);
  checkValue();
}

function checkValue() {
  if (parseInt(btn.prop('value')) === 0)
    btn.css("display", "none"); //btn.hide();
  else
    btn.css("display", ""); //btn.show()
  console.log("Current value is:" + btn.prop('value'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="total_items" value="0">
<hr>
<button type="button" onclick="AddNumber(1)">+</button>
<button type="button" onclick="AddNumber(-1)">-</button>

Answer 2

如果ID为total_items的元素是固定的，则可以使用css3的属性选择器将visibility设置为hidden，然后将增量逻辑调用为使它再次可见。

以下是一个示例代码段，根据其具有的值来处理total_items的可见性：

var btntotal_item = document.getElementById('total_items');

function incrementValue() {
  btntotal_item.value++;
}

function decrementValue() {
  btntotal_item.value--;
  if (btntotal_item.value < 0)
    btntotal_item.value = 0;
}

#total_items[value="0"] {
  visibility: hidden
}

<input type="button" id="total_items" value="0">
<input type="button" onclick="incrementValue()" value="increment by 1"><input type="button" onclick="decrementValue()" value="decrement by 1">

Answer 3

您也可以使用普通javascript =>

如果没有结果等于0，则不会显示hideShow按钮。按下按钮将隐藏值为0的结果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .noDisplay {
        display: none;
      }
    </style>
  </head>
  <body>
    <button id="p1" class="noDisplay">Hide-Show</button>
    <table style="width:100%">
      <tr>
        <th>name</th>
        <th>result</th>
      </tr>
      <tr id="0">
        <td>Jill</td>
        <td class="result">0</td>
      </tr>
      <tr id="1">
        <td>Eve</td>
        <td class="result">30</td>
      </tr>
      <tr id="2">
        <td>john</td>
        <td class="result">0</td>
      </tr>
    </table>

    <script>
      window.addEventListener('load', HideShowBtn);
      let z = [];
      function HideShowBtn() {
        let x;
        fields = document.getElementsByClassName('result');

        // Hack to convert nodelists to array
        fieldsArr = Array.prototype.slice.call(fields);

        x = fieldsArr.map(e => {
          return parseInt(e.innerText);
        });

        let y = document.getElementById('p1').classList;

        function check(x) {
          return x <= 0;
        }

        x.forEach(e => {
          if (e === 0) {
            y.remove('noDisplay');
          }
        });

        for (const i in x) {
          if (x[i] === 0) {
            z.push(x.indexOf(0, i));
          }
        }
      }

      document.getElementById('p1').addEventListener('click', () => {
        z.forEach(e => {
          document.getElementById(e).classList.toggle('noDisplay');
        });
      });
    </script>
  </body>
</html>

Answer 4

仅使用CSS即可实现此效果。

如果您希望按钮消失，但要保留按钮大小的空间，请使用：

visibility: hidden;

如果您希望按钮完全消失，请使用：

display: none;

如果您希望按钮不可见（并且仍然可以单击），请使用：

opacity: 0;

工作示例：

input[type="button"][value="0"] {
visibility: hidden;
}

<input type="button" id="total_items" value="2">
<input type="button" id="total_items" value="1">
<input type="button" id="total_items" value="0">
<input type="button" id="total_items" value="1">
<input type="button" id="total_items" value="2">

Answer 5

设置值的地方

$("#total_items").val(value).toggle(value>0)

Javascript JQuery-如果值是0，则隐藏按钮，否则，则显示

5 个答案: