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

Question

我试图根据时间条件为true来显示一些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"; 
    } 
} 

函数被调用和正确的“如果”输入（HideControls条件（假）;），但控件没有被切换。我做错了什么？

Answer 1

问题不是很清楚，这是你想要达到的目标吗？

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

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

Answer 2

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

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

Answer 3

几个指标，这将让你极大缩短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>