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

How to show/hide in javascript when function unhides 2 elements?

本文关键字：隐藏 javascript 显示 取消 函数 元素      更新时间：2023-09-26

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

问题是你使用本机node.getElementsByClassName()结果数组是"实时的" - 它会动态变化，然后你改变页面。在您的情况下 - 然后您在elements数组更改并变小e.className='hidden';执行 - 当前元素被清除，因为它没有符合您传入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';
     }
相关文章：