切换所有类的显示[重复]答案

【问题标题】：Toggle display of all classes [duplicate]切换所有类的显示[重复]
【发布时间】：2020-12-27 05:13:21
【问题描述】：

单击按钮时，我想将所有类的显示更改为 display: hide;并将它们反转

CSS：

<style>
 div.inactive {
   display: block;
 }
</style>

HTML：

<button onclick="hideInactive()">Show/hide</button>

<div class="inactive">DIV 1: inactive</div>
<p class="inactive">DIV 2: inactive</p>
<ul>
  <li class="inactive">
    List item 1: Inactive
  </li>
  <li>
    List item 2: Active
  </li>
</ul>

JS：

<script>
function hideInactive() {
    var x = document.getElementsByClassName('.inactive');
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

我已尝试以这种方式选择所有类：

var x = document.querySelectorAll(".inactive");

我已经尝试遍历每个类：

function hideInactive() {
    var x = document.querySelectorAll(".inactive");
    for (var i = 0; i < x.length; i++) {
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
}

【问题讨论】：

getElementsByClassName 代码不起作用；见What do querySelectorAll and getElementsBy* methods return?。像onclick 这样的内联事件处理程序是not recommended。它们是一种obsolete, hard-to-maintain and unintuitive 注册事件的方式。总是use addEventListener。
另外，在调用getElementsByClassName 时，不要将. 放在类的开头。这是 CSS 选择器语法的一部分。您可以将其与querySelectorAll 一起使用
在您的querySelectorAll 方法中，您循环遍历结果，似乎是因为您知道querySelectorAll 返回NodeList，但由于某种原因，您根本没有使用循环。你为什么不在循环体中使用i？另一个潜在问题是Button to show/hide div has to be pressed twice。相反，使用classList API 切换类；使用迭代方法而不是 for 循环。
谢谢你们...我还有很多东西要学。我会研究你的建议。
@suverenia 我强烈建议您阅读“浏览器像素管道”。 developers.google.com/web/fundamentals/performance/rendering .. 你以后会感谢我的。

标签： javascript html css

【解决方案1】：

document.getElementsByClassName 返回一个HTMLCollection，因此您的hideInactive 函数正在检查style 上的HTMLCollection。迭代数组并检查每个元素。

function hideInactive() {
  var x = document.getElementsByClassName('inactive');

  console.log(x.length);

  for (let i = 0 ; i < x.length; i++) {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  }
}

<button onclick="hideInactive()">Show/hide</button>

<div class="inactive">DIV 1: inactive</div>
<p class="inactive">DIV 2: inactive</p>
<ul>
  <li class="inactive">
    List item 1: Inactive
  </li>
  <li>
    List item 2: Active
  </li>
</ul>

【讨论】：

如果你在每次迭代中写入 DOM 只是为了隐藏 HTMLCollection 中的所有元素，你会迫使浏览器做很多工作..
@zergski 建议替代方案。
阅读我的回答...

【解决方案2】：

尝试向要影响的元素的父级或祖父级添加一个类。然后只需在您的 css 中添加一条规则。

.hide-class .target-element { visibility: hidden; } .. 请注意，使用可见性会更高效，因为浏览器不会重新计算布局。

然后，如果您想再次显示该元素，只需从父级中删除该类即可。这种方式高效且易于管理。

@sourav 想要一个例子.. 所以

CSS

/* here we hide the element with the '.foo' class when we add the '.hide-foo' class to body */
body.hide-foo .foo {
   visibility: hidden;
}

/* this makes the child visibile, even though the parent is hidden. Handy! */
.bar {
   visibility: visible;
}

const body = document.body;
body.classList.add('hide-foo');

HTML

   <body>
      <!-- this is hidden -->
      <div class="foo"></div>
      <!-- this is visible -->
      <div></div>
      <!-- this is hidden -->
      <div class="foo">
         <!-- and this is visible even though the parent is hidden -->
        <div class="bar"></div>
      </div>
   </body>

希望这有助于理解:)

【讨论】：

如果元素是兄弟而不是父元素怎么办？如果我希望父母中的一些孩子保持可见而隐藏一些孩子怎么办？
@souravsatyam 你可以用这个方法去尽可能多的根元素.. 即当添加一个类到 body (document.body.classList.add('hide-foo')) 并且你的 CSS 中有一个类似于 body.hide-foo .foo { visibility: hidden } 的规则浏览器将隐藏类.foo 位于body 中的所有元素。不管是兄弟姐妹、孩子还是堂兄弟……这样就没有额外的计算、循环，只有一次写入 DOM。如果你使用 CSS 变量，效率也会更高。它都在结构中。
document.body.classList.add('hide-foo') 这会将hide-foo 类添加到正文中。即使我在 foo 类中添加 visibility: hidden ，而不是在删除类时我将不得不迭代。 foo 只能与某些类一起添加。如果您可以在不迭代元素的情况下提供一个实际示例，那就太好了。
@souravsatyam 我的朋友。试着听听我在说什么.. 当你添加hide-foo 类主体并且你有一个类（在本例中为.foo）后用空格分隔。浏览器将visibility: hidden 属性应用于所有在主体内具有.foo 类的元素。身体本身不受影响。我在之前的评论中给出了这个任务所需的确切代码量的示例。这就是它的美妙之处..
好的！我明白你的意思了。意味着您将在按钮单击时在正文中保持切换hide-foo 类，而具有foo 类的那些将切换可见性。是的，更好的方法。会试试的。