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>