当函数取消隐藏 2 个元素时如何在 javascript 中显示/隐藏？答案

【问题标题】：How to show/hide in javascript when function unhides 2 elements?当函数取消隐藏 2 个元素时如何在 javascript 中显示/隐藏？
【发布时间】：2012-08-10 16:09:09
【问题描述】：

我有一个 javascript 可以同时隐藏/取消隐藏我的 html 中的 2 个元素。当它只有一个时它工作得很好，但现在由于某种原因，当我单击两次时，某些元素只会消失，我不知道错误在哪里，这是代码以防有人发现错误谢谢。该函数取消隐藏给定 div id 的两个元素（xdivID 和 divID）并保持父级和祖父级可见（idParent idUncle）

function doubleunhide(xdivID, divID, idParent, idUncle) {
 var xitem = document.getElementById(xdivID);
 if(xitem){
 xitem.className='unhidden';
}
var item = document.getElementById(divID);
 if(item) {
   item.className='unhidden';
   }
   var elements = getElementsByClassName(document, "unhidden");
      var n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];
if ((e.id != divID) && (e.id != xdivID) && (e.id != idParent) && (e.id != idUncle)){
     e.className='hidden';
     }
  }}

下面是它在 html 中的实现方式：

<div id="prj" class="hidden" style="margin-left:1em">
    <a href="javascript:doubleunhide('prj011', 'prj01numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj01link">Project 01</a> <br>
    <a href="javascript:doubleunhide('prj021', 'prj02numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj02link">Project 02</a> <br>
    <a href="javascript:doubleunhide('prj031', 'prj03numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj03link">Project 03</a> <br>
    Project 04<br>
    Project 05<br>
    </div>

【问题讨论】：

如果你制作一个 jsfiddle 来演示这个问题会有所帮助。
你从哪里扩展 getElementsByClassName() ？这不是标准方法。
什么 CSS 与 unhidden 和 hidden 类相关联？
是的，我是从另一篇文章中复制的，当我一次只取消隐藏一个元素时，它可以正常工作。我正在准备一个简短的 jsfiddle...
这是一个有趣行为的链接 [link] (417i.com/HdM) 我已经尽可能缩短了 html 以使其在不禁用错误的情况下更具可读性

标签： javascript html show-hide

【解决方案1】：

问题是，然后您使用本机 node.getElementsByClassName() 生成的数组是“实时的” - 它会动态更改然后您更改页面。在您的情况下-然后您执行e.className='hidden'; elements 数组已更改并变小-当前元素被清除，因为它不符合您传递给getElementsByClassName() 的搜索条件。但是您的代码仍然认为存在相同的元素并对其进行迭代。您最终尝试获取未定义的节点，出现错误并且脚本损坏。为避免这种情况，您可以按相反的顺序进行迭代：

   for (var i = n-1; i >=0 ; i--) {
     var e = elements[i];
     if ((e.id != divID) && (e.id != xdivID) && (e.id != idParent) && (e.id != idUncle)){
         e.className='hidden';
     }

【讨论】：