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

Question

我有這個簡單的功能，可以切換網頁中的隱藏元素。

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');" />

這工作正常，但我想在每次單擊按鈕時切換頁面上的其他（表）元素（具有某些ID）（正在切換的那個，無論是打開還是關閉）。

Answer 1

你可以使用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>

Answer 2

您可以選擇所有其他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';

Answer 3

輕松使用jQuery 。 例如，給每個toggled元素一個類，如toggle_element ，然后在JS中：

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

這將使用類toggle_element隱藏所有元素並顯示具有id id元素。

JSFiddle示例在這里。

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

問題描述

3 個解決方案

解決方案1
4 已采納 2012-08-04 08:25:15

解決方案2
2 2012-08-04 07:58:22

解決方案3
1 2012-08-04 08:05:16

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

問題描述

3 個解決方案

解決方案1 4 已采納 2012-08-04 08:25:15

解決方案2 2 2012-08-04 07:58:22

解決方案3 1 2012-08-04 08:05:16

解決方案1
4 已采納 2012-08-04 08:25:15

解決方案2
2 2012-08-04 07:58:22

解決方案3
1 2012-08-04 08:05:16