1

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

目前我在文档中有很多 div，但我特别想处理 6 个。我有一系列对应于六个 div 的按钮。当人们单击按钮时，AI 想要显示（使可见）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

4

4 回答 4

2

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

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

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

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

您还可以做的是data-div为您的按钮分配 eg 属性，其中包含要隐藏/显示的 div 的 ID，然后您可以将上面的内容转换为以下内容（假设您的按钮具有button类）：

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

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

于 2013-03-25T13:35:25.470 回答
2

看看假设你有这样的标记

<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" />

然后添加这样的脚本：

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

它应该工作。

看到这个小提琴

因此，您不是在遍历所有 dom 元素，而是在选择需要处理的元素。单击后，您将所有这些隐藏起来，并显示目标，即data-target-div

于 2013-03-25T13:39:35.417 回答
1

基于jQuery的解决方案：

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

function ShowHideDiv(DivName)
{
    $(".ShowHide").not("#" + DivName).hide();
    $("#" + DivName).show();
}
于 2013-03-25T13:32:15.477 回答
0

将 class='switchable' （或其他）添加到每个这样的 DIV 然后使用prototype.js 你可以做这样的事情

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}
于 2013-03-25T13:38:40.137 回答