document.getElementById（id）和切換多個ID

我有這個簡單的函數來切換網頁中的隱藏元素。document.getElementById（id）和切換多個ID

function showtable(id) 
{ 
if(document.getElementById(id).style.display == 'block') 
    { 
document.getElementById(id).style.display = 'none'; 
    }else{ 
document.getElementById(id).style.display = 'block'; 
} 
} 


<input type="button" value="Toggle" onclick="showtable('id');" />

這工作得很好，但我想切換一些其他的（表）元素（除了一些IDS）（除了被觸發，無論是打開或關閉的）的頁面每次按鈕被點擊。

來源

2012-08-04 user1575698

目標是無法實現的，因爲「所有其他元素」包括'body'元件，和設置'顯示：none'隱藏其所有後代太（包括您的按鈕）。請澄清。解釋你爲什麼這樣做也可能有幫助。 – 2012-08-04 08:01:01

不好意思。我編輯了我的問題。我需要隱藏一些已經可見的表格元素，因爲如果兩個表格元素同時可見，它看起來不太好。我想讓目前只有一個表格元素可見。 – user1575698 2012-08-04 08:05:50

你可以使用jQuery，但如果你不想使用它;這裏是一個純粹的JavaScript例子。要查看它的工作原理，請將其複製粘貼到文本文件中，將其保存爲test.htm並在瀏覽器中打開它。它包含三個表格，每個表格上面都有一個按鈕。點擊一個按鈕時，會顯示錶格並隱藏所有其他表格。如果你需要更多的表，給他們一個ID，並且其ID添加到陣列中的功能：

var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];

如果您希望能夠切換該表也，它會關閉當然還需要一個按鈕：

<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />

例如：

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function showtable(id) { 
       var ids = ["redTable", "greenTable", "blackTable"]; 
       for(var i = 0; i < ids.length; i++) { 
        if(ids[i] != id) 
         document.getElementById(ids[i]).style.display = "none"; 
       } 
       document.getElementById(id).style.display = "block"; 
      } 
     </script> 
    </head> 
    <body> 
     <input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: red;" id="redTable"> 
      <tr> 
       <td>redTable</td> 
      </tr> 
     </table> 
     <input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable"> 
      <tr> 
       <td>greenTable</td> 
      </tr> 
     </table> 
     <input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable"> 
      <tr> 
       <td>blackTable</td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2012-08-04 08:25:15 Tom

像魔術一樣工作。 – user1575698 2012-08-04 08:36:45

您可以選擇所有其他DOM元素，將它們的display屬性設置爲「none」，然後僅顯示應該可見的一個。

另一種方法是跟蹤的可視元素的一個變量：

var visibleElement = null;

當您切換一個元素，你讓一個可見元素並隱藏先前可見一個：

// Hide the previously visible element, if any. 
if (visibleElement != null) 
{ 
    visibleElement.style.display = 'none'; 
} 

// Make your new element the visible one. 
visibleElement = document.getElementById(id) 
visibleElement.style.display = 'block';

來源

2012-08-04 07:58:22 svanryckeghem

簡單使用jQuery。例如，給每個切換元件一類像toggle_element，然後在JS：

$('.toggle_element').hide(); 
$('#id').show();

這將隱藏與toggle_element類的所有元素，並顯示元件ID爲id。

JSFiddle example here。

來源

2012-08-04 08:05:16 Kurt

爲什麼你提供jQuery解決方案來解決OP明顯使用原始JavaScript的問題？ – Tadeck 2012-08-04 08:10:26

@Tadeck - 因爲OP正在做一些使用jQuery可以輕鬆實現的功能，所以我敢說他不知道這個 – Kurt 2012-08-04 08:19:15

這是非常簡單的任務，因爲OP看起來並沒有使用jQuery，所以我不會建議他添加整個JavaScript框架僅用於執行此操作。看看接受的答案，看看它在純JavaScript中也很容易實現。無論如何，你已經爲已經使用jQuery的人提供了很好的選擇。 – Tadeck 2012-08-04 08:50:55

document.getElementById（id）和切換多個ID

回答

相關問題