javascript document.getElementById(id) 并切换多个 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11806925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById(id) and toggling multiple ids
提问by user1575698
I have this simple function which toggles a hidden element in the webpage.
我有这个简单的功能，可以切换网页中的隐藏元素。
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');" />
This works fine, but I want to toggle off some other (table) element (with certain ids) (except for the one which is being toggled, whether on or off) on the page every time the button is clicked.
这工作正常，但我想在每次单击按钮时关闭页面上的一些其他（表格）元素（具有某些 ID）（除了正在切换的元素，无论是打开还是关闭）。
回答by Tom
You could use jQuery, but if you don't want to use that; here is a pure javascript example. To see how it works, copy paste it in a text file, save it as test.htm and open it in a browser. It contains three tables, each with a button above it. When clicking a button, it's table gets displayed and all other tables get hidden. If you need more tables, give them an id, and add their id to the array in the function:
您可以使用 jQuery，但如果您不想使用它；这是一个纯 javascript 示例。要查看它是如何工作的，请将其复制粘贴到一个文本文件中，将其另存为 test.htm 并在浏览器中打开它。它包含三个表格，每个表格上方都有一个按钮。单击按钮时，它的表格会显示出来，而所有其他表格都会隐藏起来。如果你需要更多的表，给它们一个 id，并将它们的 id 添加到函数中的数组中：
var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];
If you want to be able to toggle that table also, it will off course also need a button:
如果您还希望能够切换该表，它当然还需要一个按钮：
<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />
example:
例子：
<!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>
回答by svanryckeghem
You could select all the other DOM elements, set their display attribute to "none", and then only show the one that should be visible.
您可以选择所有其他 DOM 元素，将它们的显示属性设置为“无”，然后只显示应该可见的元素。
Another way would be to keep track of the visible element in a variable:
另一种方法是跟踪变量中的可见元素：
var visibleElement = null;
When you toggle an element, you make that one the visible element and hide the previously visible one:
当您切换一个元素时，您会将其设为可见元素并隐藏之前可见的元素：
// 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';
回答by Kurt
Easy using jQuery. For example, give each toggled element a class like toggle_elementand then in JS:
轻松使用jQuery。例如，给每个切换元素一个类toggle_element，然后在 JS 中：
$('.toggle_element').hide();
$('#id').show();
This will hide all elements with class toggle_elementand show element with id id.
这将隐藏所有带有 class 的元素toggle_element并显示带有 id 的元素id。
JSFiddle example here.
这里的JSFiddle 示例。
