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

尝试一下

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

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

Answer 3

隐藏在html代码中的另一种方法：

<button class="btn btn-default answer" type="submit" name="score" value="<?=$qdata["sc1"]?>" style="white-space: normal; font-size: 15px;<?php echo $qdata["sc1"] ? "" : "display: none;" ?>"><?=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;<?php echo $qdata["sc2"] ? "" : "display: none;" ?>"><?=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;<?php echo $qdata["sc3"] ? "" : "display: none;" ?>"><?=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;<?php echo $qdata["sc4"] ? "" : "display: none;" ?>"><?=base64_decode($qdata["an4"])?></button>

Answer 4

如果您不是要找的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>

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

4 个答案: