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

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