如何包含更多的变量来显示和隐藏图标

document.getElementById("_bar_Id_").onclick = function(c) {
var x = document.getElementById("dois");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}

您必须创建另一个.onclick侦听器，如下所示:

document.getElementById("_bar_Id_").onclick = function(c) {
//for element with id: dois
let x = document.getElementById("dois");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
//for element with id: dois2
x = document.getElementById("dois2");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}

当你有很多元素需要在点击时改变时，这显然是不合适的。因此，您应该有一个包含要侦听的所有元素的ids的数组，并为每个元素添加一个事件侦听器，如下所示:

const elementIds = ["dois", "dois2", "dois3", "dois4",];
document.getElementById("_bar_Id_").onclick = function(c) {
for (id of elementIds) {
const x = document.getElementById(id);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
}

，现在每当你有一个新的div和id你想听，你只需要把它们添加到elementIds数组。

进一步的改进将是如何选择要更改其属性的项目。对于最后一种解决方案，每当您需要添加另一个元素时，您将不得不提出一个唯一的id并将其添加到elementIds数组中。

或者，您可以提供更改barClickTarget等公共类的visibility所需的所有元素，并使用getElementsByClassName获取该类的所有元素。然后，现在您只需:

<div class="barClickTarget">...</div>
<div class="barClickTarget">...</div>
<div class="barClickTarget">...</div>

JS

document.getElementById("_bar_Id_").onclick = function(c) {
const elems = document.getElementsByClassName("barClickTarget");
for(const x of elems) {
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
}

，你现在所要做的就是添加另一个barClickTarget，把它添加到目标元素的类中。