如果值为0或为空，如何隐藏按钮？

Question

我在一个问答应用程序上工作，从数据库带来了多个可能答案的问题，我只是有一个问题，隐藏一个按钮时，我需要把像2个可能的答案，而不是3或4

下面是html代码：

<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc1"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an1"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc2"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an2"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc3"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an3"])?></button>
<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc4"]?>" style="white-space: normal; font-size: 15px;"><?=base64_decode($qdata["an4"])?></button>

我不知道如何隐藏按钮时，值为空，对不起，我的英语。

Answer 1

你真的应该根据是否从服务器获得数据来显示/隐藏按钮，而不是在你已经用数据更新了按钮之后。无论如何，这可能就是您所要求的。

编辑:在您的情况下，您可能还希望检查以确保button.value != ''，因为您的数据可能只是空白。

​

var buttons = document.querySelectorAll('button');

buttons.forEach(function(button) {
  if (!button.value) {
    button.style.display = "none"
  }
});

<button class="btn btn-default answer" type="submit" name="score" value="1" style="white-space: normal; font-size: 15px;">1</button>
<button class="btn btn-default answer" type="submit" name="score" value="2" style="white-space: normal; font-size: 15px;">2</button>
<button class="btn btn-default answer" type="submit" name="score" style="white-space: normal; font-size: 15px;">3</button>
<button class="btn btn-default answer" type="submit" name="score" value="4" style="white-space: normal; font-size: 15px;">4</button>

​

Answer 2

如果您不需要javascript，这里有一个纯CSS解决方案

​

button[value=""],
button[value="0"]{
  display: none;
}

<button type="submit" value="">A</button>
<button type="submit" value="B">B</button>
<button type="submit" value="C">C</button>
<button type="submit" value="0">D</button>

​

Answer 3

试试这个

let btns = document.querySelectorAll("button");

btns.forEach(function(par){
  if(par.value == "" || par.value == 0){
    par.style.display = "none";
  }
})