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

回答

相关问题