HTML-基于类隐藏对象

Question

我有一个函数，可以根据单选按钮的更改隐藏具有相应ID的div，但是，我想同时隐藏多个项目，因为ID是唯一的，所以我不能全部隐藏它们。我该如何设置一个可以隐藏的类，以及如何调整下面的代码以使其工作？任何帮助都非常感谢

function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};

Answer 1

您可以将数据属性与属性选择器一起用于此目的。因此，您只需要将data-hidden-for属性添加到所需的节点，并使用document.querySelector()或document.querySelectorAll()访问它们

Answer 2

首先给所有元素一个基类名称baseClass。你可以给它们一个像hidden这样的类名，然后在你的代码中你可以做下面这样的事情：

const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}

在单选按钮的点击事件中，你可以将我上面提到的这个类添加到你想要隐藏的类中：

element.classList.add("hidden");

或

element.classList.remove("hidden");