使用JavaScript函數參數切換多個元素

Question

我想根據點擊哪個按鈕來顯示/隱藏div。我嘗試使用javascript函數的參數來做這件事，但我猜我做的全部都是錯的，所以請幫忙。

這裏的HTML我有：

<div id="div1"> 
Content of div1</div> 
<div id="div2"> 
Content of div2</div> 

<button id="button" onclick="showhide(x)">Toggle div1</button> 

<button id="button" onclick="showhide(y)">Toggle div2</button> 

這裏就是我有這麼遠，JS-明智：

<script> 
function showhide(x,y) 
{ 
     var div x = "div1"; 
     var div y = "div2"; 
     var div = document.getElementById(x); 
     var div = document.getElementById(y); 

if (div.style.display !== "none") { 
    div.style.display = "none"; 
} 
else { 
    div.style.display = "block"; 
} 
} 
</script> 

Answer 1

Here is the HTML code : 
<div id="div1"> 
Content of div1 
</div> 
<div id="div2"> 
    Content of div2 
</div> 

<button id="button" onclick="showhide('div1')">Toggle div1</button> 
<button id="button" onclick="showhide('div2')">Toggle div2</button> 

Here is the javascript code : 

<script type="text/javascript" > 
function showhide(toggleID){ 
    var toggleDiv = document.getElementById(toggleID); 
    if(toggleDiv.style.display != "none"){ 
    toggleDiv.style.display = 'none'; 
    }else{ 
    toggleDiv.style.display = 'block'; 
    } 
} 
</script> 

Answer 2

這是不對的：

var div x = "div1"; 

你不能有空間：

var div_x = "div1"; 

實際上，你可以刪除這兩條線，讓它像這樣：

function showhide(x,y) 
{ 
     var div = document.getElementById(x); 
     var div2 = document.getElementById(y); 

     if (div.style.display !== "none") { 
      div.style.display = "none"; 
     } 
     else { 
      div.style.display = "block"; 
     } 

     if (div2.style.display !== "none") { 
      div2.style.display = "none"; 
     } 
     else { 
      div2.style.display = "block"; 
     } 
} 

裏調用：

showhide("div1", "div2"); 

Answer 3

使用這樣的：

<button id="button" onclick="showhide(x,'')">Toggle div1</button> 

<button id="button" onclick="showhide('',y)">Toggle div2</button> 

而改變這一點：

var div = document.getElementById(x); 
var div = document.getElementById(y); 

要這樣：

var div = document.getElementById(x && y); //if x returns x else y 

Answer 4

你有其中有2個參數的JavaScript函數，並在你的HTML你只發送1 你可以做的是：

在HTML的onclick在按鈕：

<button id="button" onclick="showhide('div1')">Toggle div1</button> 
<button id="button" onclick="showhide('div2')">Toggle div2</button> 

以及JavaScript函數只需要1個參數：

function showhide(divElement) 
{ 

    var div = document.getElementById(divElement); 

    if (div.style.display !== "none") { 
    div.style.display = "none"; 
    } 
    else { 
     div.style.display = "block"; 
    } 
}