1

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

1 回答 1

2

问题是然后你使用原生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';
     }
于 2012-08-10T17:29:50.957 回答