Javascript循环显示文档中的隐藏元素（Jquery也可以）

我有一个使div可见/隐藏的冗余过程，我相信提高效率的方法是使用循环

目前，我有许多div通过文件，但有6个，特别是我想处理。我有一系列与六个div相对应的按钮。当用户单击按钮A时，我希望显示（使其可见）div A并隐藏div的B、C、D、E、F。我的javascript如下所示：

<a href="#" onclick="ShowMe('A'); return false" />
<a href="#" onclick="ShowMe('B'); return false" />
<a href......etc />

<div id="A">blah...blah</div>
<div id="B">blah...blah</div>

<script type="java....">

   function ShowHideDiv(DivName)
   {
      if(DivName == 'A')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'visible';

         var divb = document.getElementById('B');
         div.style.visibility = 'hidden';

         etc....
      }
      else if (DivName == 'B')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'hidden';

         var divb = document.getElementById('B');
         div.style.visibility = 'visible';
         etc...............
      }

   }

</script>

$('input[type=button]').click(function(){
    $('.marked').hide(200);
   $('#'+$(this).data('target-div')).show();
});

诸如此类
诸如此类
函数ShowHideDiv（DivName）
{
如果（DivName='A'）
{
var diva=document.getElementById（'A'）；
div.style.visibility='visible'；
var divb=document.getElementById（'B'）；
div.style.visibility='hidden'；
等
}
else if（DivName==“B”）
{
var diva=document.getElementById（'A'）；
div.style.visibility='hidden'；
var divb=document.getElementById（'B'）；
div.style.visibility='visible'；
等
}
}

正如前面提到的循环的主要候选对象，但我的问题是如何包含循环。例如，如果我的循环遍历了整个document对象，那么我希望隐藏的div是可见的，那么如何避免这种情况呢

我有两个想法，但如果其他人有其他想法、想法、技术等

给我的div一个非常奇怪的前缀，比如ShowHide_a，然后我的循环可以遍历文档对象中的所有div，解析它的名称，如果没有前缀，则移动到下一个div。如果我们有一个大文档，并且脚本获取每个对象并进行解析，然后检查名称，那么这当然是非常低效的

将有问题的div包装在父容器中，例如：

然后我的javascript就可以被包含在DivParent树中循环。但是，如果我的div在文档模型中的不同位置怎么办？我是否使用css position属性将它们保存在ParentDiv和position中，然后将它们放在它们所属的位置

任何其他想法都将不胜感激 JB

基于jQuery的解决方案：

向div添加一个允许隐藏/显示的类，然后执行以下操作

function ShowHideDiv(DivName)
{
    $(".ShowHide").not("#" + DivName).hide();
    $("#" + DivName).show();
}

基于jQuery的解决方案：

向div添加一个允许隐藏/显示的类，然后执行以下操作

function ShowHideDiv(DivName)
{
    $(".ShowHide").not("#" + DivName).hide();
    $("#" + DivName).show();
}

---

让我提出一个更好的办法

如果可以使用jQuery，则可以执行以下操作：

为所有div分配一个类（例如

框

）。然后您的按钮需要调用此函数：

function toggleDiv (divID) {
    $(".box").hide();
    $("#"+divID).show();
}

您还可以为包含要隐藏/显示的div ID的按钮指定例如

数据div

属性，然后您可以将上述内容转换为以下内容（假设您的按钮具有

按钮

类）：

---

以上内容涵盖了所有内容，将事件分配给按钮并隐藏/显示div。

让我建议一种更好的方法

如果可以使用jQuery，则可以执行以下操作：

为所有div分配一个类（例如

框

）。然后您的按钮需要调用此函数：

function toggleDiv (divID) {
    $(".box").hide();
    $("#"+divID).show();
}

您还可以为包含要隐藏/显示的div ID的按钮指定例如

数据div

属性，然后您可以将上述内容转换为以下内容（假设您的按钮具有

按钮

类）：

以上内容涵盖了所有内容，为按钮分配事件并隐藏/显示DIV。

向每个此类DIV添加class='switchable'（或其他内容），然后使用prototype.js您可以执行以下操作

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

将class='switchable'（或任何东西）添加到每个这样的DIV中，然后使用prototype.js您可以执行类似的操作

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

---

看，假设您有这样的标记

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

它应该会起作用

看到这个了吗

---

因此，您并不是遍历所有dom元素，而是选择需要处理的元素。单击后，您将隐藏所有标记，并显示目标标记，即

数据目标div

请参见假设您有这样的标记

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

它应该会起作用

看到这个了吗

---

因此，您并不是遍历所有dom元素，而是选择需要处理的元素。单击后，您将隐藏所有目标，并显示目标，即

数据目标div

ahhh。除了样式设计之外，我从来没有想过使用css类。现在，如果我理解正确，这将处理整个文档，并找到匹配的类名。Correct。要将其范围限制在文档的特定部分，您可以改为执行

$（“#subsection.ShowHide”）.not（“#”+DivName.hide（）Id的选择器是jQuery中最快的选择器之一（如果不是的话），而类选择器也不会落后太多。请记住
$（“#subsection.ShowHide”）
实际上比
$（“.ShowHide”）慢。除了样式设计之外，我从来没有想过使用css类。现在，如果我理解正确，这将处理整个文档，并找到匹配的类名。Correct。要将其范围限制在文档的特定部分，您可以改为执行
$（“#subsection.ShowHide”）.not（“#”+DivName.hide（）Id的选择器是jQuery中最快的选择器之一（如果不是的话），而类选择器也不会落后太多。请记住，
$（“#subsection.ShowHide”）
实际上比
$（“.ShowHide”）
要慢，您的按钮看起来像这样：
显示/隐藏A
我不是说我不同意，只是想理解。见我对温特布拉德的评论。我们仍然会在整个文档对象中循环寻找我们的“类”。data div似乎更具吸引力，因为它将包含更直接的方法。目前，我的按钮是href样式的，看起来像按钮，但它们很容易更改。抱歉，我恐怕不理解您的评论？我们将在页面上的每个对象中循环，在类名sho中查找匹配的类名