JavaScript 按类隐藏元素

在 Web 开发中，我们经常需要通过 JavaScript 控制页面元素的显示与隐藏。本文将介绍如何通过类名称控制元素的隐藏。

实现思路

我们可以为要隐藏的元素设置一个特定的类名称，然后通过 JavaScript 根据类名称获取到这些元素，并将它们的样式设置为 display: none 即可实现隐藏。

实现代码

下面是使用原生 JavaScript 实现按类隐藏元素的示例代码：

// 获取所有需要隐藏的元素
var elementsToHide = document.querySelectorAll('.hidden-element');

// 循环遍历每个需要隐藏的元素，并设置其样式为 display: none
for (var i = 0; i < elementsToHide.length; i++) {
  elementsToHide[i].style.display = 'none';
}

在上面的代码中，我们使用了 document.querySelectorAll 方法获取到所有类名称为 hidden-element 的元素，并使用一个循环遍历每个需要隐藏的元素，然后将其样式设置为 display: none。

总结

通过上面的方法，我们可以很方便地实现按类隐藏元素的功能。这种方法可以减少代码量并提高可维护性，因为我们可以使用统一的类名称来控制所有需要隐藏的元素。