Javascript JQuery - Hide a button if value is 0, display if not

问题

I have this:

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

The value is increasing as items added to the site. What I need is to hide it if the value is 0 and start to displaying as the value is increasing.

I know JQuery has an option to add a css display:none option, but I don't know how. Thank you for all the help!

回答1:

Try this code below, Just you must call checkValue() function every time number count of objects changed.

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>

回答2:

if the element with id total_items is fixed then you can use the css3's attribute selector to make the visibility as hidden and then call the increment logic to make it visible again.

Here is a sample snippet handling the visibility of the total_items based on the value it has:

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

回答3:

You can also do this using vanilla javascript =>

if no results are equal to 0 then hideShow button will not show up. Button press will hide results with value 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>

回答4:

You can achieve this effect with CSS alone.

If you want the button to disappear, but leave a button-sized space, use:

visibility: hidden;

If you want the button to disappear completely, use:

display: none;

If you want the button to be invisible (and still clickable), use:

opacity: 0;

Working Example:

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

回答5:

Where you set the value

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

来源：https://stackoverflow.com/questions/52177295/javascript-jquery-hide-a-button-if-value-is-0-display-if-not

标签

javascript

jquery

html

css

show-hide