如何根據javascript變量顯示網站的某個部分？

Question

假設我有一個JavaScript變量 「is_valid」

如果變量是1，我想顯示：

<div>It's valid!</div> ...and a big chunk of other code 

否則......

<div>NOT valid</div>...and a big chunk of other code 

我不想使用INNERHTML。我想這樣做：

<script type="text/javascript"> 
    if(is_valid == 1){ 
</script> 
    It's valid! 
<script type="text/javascript"> 
    }else{ 
</script> 
    It's not valid 
<script type="text/javascript"> 
    } 
</script> 

Answer 1

將代碼放入可以顯示或隱藏的元素中。例如：

<div id="Valid"> 
    <div>It's valid!</div> ...and a big chunk of other code 
</div> 
<div id="Invalid"> 
    <div>NOT valid</div>...and a big chunk of other code 
</div> 

<script type="text/javascript"> 
document.getElementById('Valid').style.display = (is_valid == 1 ? 'block' : 'none'); 
document.getElementById('Invalid').style.display = (is_valid == 1 ? 'none' : 'block'); 
</script> 

Answer 2

假設您有：

<div id="isvalid">It's valid!</div> 
<div id="isnotvalid">NOT valid!</div> 
... blah blah ... 

然後，在你的JavaScript：

document.getElementById("isvalid").style.display = is_valid ? "" : "none"; 
document.getElementById("isnotvalid").style.display = is_valid ? "none" : ""; 

或者，如果你使用jQuery：

$("#isvalid").toggle(isvalid); 
$("#isnotvalid").toggle(!isvalid); 

Answer 3

假設你已經在網頁上的內容，只是想切換可視性，您可以執行以下操作。

HTML

<div id="valid_section">....</div> 
<div id="invalid_section">....</div> 

的JavaScript

document.getElementById("valid_section").style.display = is_valid ? ""  : "none"; 
document.getElementById("invalid_section").style.display = is_valid ? "none" : "";