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