切换时不显示/隐藏html控件答案

【问题标题】：html controls not being shown/hidden when toggled切换时不显示/隐藏html控件
【发布时间】：2017-03-05 03:07:10
【问题描述】：

我正在尝试根据时间条件为真来启用某些 html 控件的显示。

我的控件如下：

<span id="t"><button id="ctr">Centre Map</button></span><span id="t2"><form name="Follow"><input type="checkbox" id ="FT" name="FT" onclick = "TitanicCheckBox( this )"><span id="FTText">Follow</span></form></span>

而我的切换控件如下：

function HideControls( tof )
{
  if (tof==true)  // hide and remove area where controls would be
  {

    document.getElementById("t").style.display = "none";
    document.getElementById("FT").style.display = "none";
    document.getElementById("FTText").style.display = "none";
  }
  else
  {

    document.getElementById("t").style.display = "all";
    document.getElementById("FT").style.display = "all";
    document.getElementById("FTText").style.display = "all";
  }
}

正在调用该函数并输入了正确的“if”条件 (HideControls(false);)，但未切换控件。我做错了什么？

【问题讨论】：

else 应该使用.style.display = "";，而不是="all"。
试试display = "visible";
谢谢，效果很好！

标签： javascript

【解决方案1】：

在显示属性中，值all 不存在。您应该使用block 或initial。

参考：https://www.w3schools.com/cssref/pr_class_display.asp

【讨论】：

【解决方案2】：

一些可以大大缩短HideControls 方法的提示：

将 DOM 元素缓存在函数外部的变量中。这意味着您不必在每次调用函数时都使用getElementById。
使用.style.display = 'none' 和.style.display = '' 分别隐藏和显示控件。
使用三元运算符而不是 if-else 语句；在这种情况下，将每个变量设置为 (tof ? 'none' : '') 会更简洁。

var $t = document.getElementById('t')
var $FT = document.getElementById("FT")
var $FTText = document.getElementById("FTText")

function HideControls (tof) {
  $t.style.display = $FT.style.display = $FTText.style.display = (tof ? 'none' : '')
}

<button onclick="HideControls(false)">Show Controls</button>
<button onclick="HideControls(true)">Hide Controls</button>
<hr>


<span id="t"><button id="ctr">Centre Map</button></span><span id="t2"><form name="Follow"><input type="checkbox" id ="FT" name="FT" onclick = "TitanicCheckBox( this )"><span id="FTText">Follow</span></form>
</span>

【讨论】：

【解决方案3】：

问题不是很清楚，这是您想要实现的目标吗？

function HideControls( tof )
{
  if (tof.checked==true)  // hide and remove area where controls would be
  {

    document.getElementById("t").style.display = "none";
    document.getElementById("FT").style.display = "none";
    document.getElementById("FTText").style.display = "none";
  }
  else
  {

    document.getElementById("t").style.display = "all";
    document.getElementById("FT").style.display = "all";
    document.getElementById("FTText").style.display = "all";
  }
}

&lt;span id="t"&gt;&lt;button id="ctr"&gt;Centre Map&lt;/button&gt;&lt;/span&gt;&lt;span id="t2"&gt;&lt;form name="Follow"&gt;&lt;input type="checkbox" id ="FT" name="FT" onclick = "HideControls( this )"&gt;&lt;span id="FTText"&gt;Follow&lt;/span&gt;&lt;/form&gt;&lt;/span&gt;

【讨论】：