Javascript 循环显示文档中的隐藏元素(Jquery 也行)

Question

我有一个使 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>

如前所述，循环的主要候选者，但我的问题是如何包含循环。例如，如果我的循环遍历整个文档对象，那么我将隐藏我希望可见的 div，那么如何避免这种情况？

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

1. 为我的 div 的名称添加一个非常古怪的前缀，例如 ShowHide_A 然后我的循环可以遍历文档对象中的所有 div，解析它的名称，如果它没有前缀则移动到下一个.如果我们有一个大文档并且脚本获取每个对象并解析然后检查名称，这当然会非常低效。

2. 将有问题的 div 包裹在父容器中，例如:

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

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

Answer 1

让我提出一个更好的方法。

如果您会使用 jQuery，则可以执行以下操作:

为所有的 div 分配一个类(例如 box)。然后你的按钮需要调用这个函数:

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

你还可以做的是分配，例如data-div 属性添加到您的按钮，其中包含要隐藏/显示的 div 的 ID，然后您可以将上面的内容转换为以下内容(假设您的按钮有 button类):

$(".button").click(function () {
    var divID = $(this).attr("data-div");
    $(".box").hide();
    $("#"+divID).show();
});

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