如何在javascript函数外部调用数组

我有两个函数可以显示和隐藏页面上的元素。我试图使代码更高效，这样如果元素被添加到页面中，我就不必更新每一行。代码现在是这样的：

function myOpenFunction() {
   var elem1 = document.getElementById("div1");
   if (elem1) { document.getElementById("div1").style.display = "block";}
   var elem2 = document.getElementById("div2");
   if (elem2) { document.getElementById("div2").style.display = "block";}
   var elem3 = document.getElementById("div3");
   if (elem3) { document.getElementById("div3").style.display = "table";}
}


function myCloseFunction() {
   var elem1 = document.getElementById("div1");
   if (elem1) { document.getElementById("div1").style.display = "none";}
   var elem2 = document.getElementById("div2");
   if (elem2) { document.getElementById("div2").style.display = "none";}
   var elem3 = document.getElementById("div3");
   if (elem3) { document.getElementById("div3").style.display = "none";}
}

我尝试将所有这些变量放入函数外部的数组中，这样在添加新元素时就不必重复这些变量。但是，它不起作用

var myArray = [
document.getElementById("div1"), 
document.getElementById("div2"),
document.getElementById("div3")
];

function myOpenFunction() {
   if (myArray[0]) { myArray[0].style.display = "block";}
   if (myArray[1]) { myArray[1].style.display = "block";}
   if (myArray[2]) { myArray[2].style.display = "table";}
}

function myCloseFunction() {
   if (myArray[0]) { myArray[0].style.display = "none";}
   if (myArray[1]) { myArray[1].style.display = "none";}
   if (myArray[2]) { myArray[2].style.display = "none";}
}

---

有什么办法可以这样做吗

调用函数时，您的

myOpenFunction

和

myCloseFunction

正在检查元素是否存在，而脚本运行时，您的

myArray

正在将元素放入数组中-逻辑不同。您可以使用一个ID数组，然后在调用open或close函数时，迭代该数组以调用

getElementById

来提取每个元素，如果存在，则设置其

样式

：

const ids = ['div1', 'div2', 'div3'];
function myOpenFunction() {
  ids.forEach((id, i) => {
    const element = document.getElementById(id);
    if (element) {
      element.style.display =
      i === 2
      ? 'block'
      : 'table';
    }
  });
}

---

您所能做的就是使用一个计数器并与您的类名连接以推送到您的数组中。您只需要拥有ID为

div1

、

div2

等的所有div：

var myElements = document.getElementsByClassName("selectedDivs");
var myArray = [];

for (var i = 1; I <= myElements.length; i++) {
    myArray.push("div" + i);
}

---

这将解决您的问题。

最好将所有项赋予相同的类，然后循环其他项。如果某些元素需要不同的显示状态，可以在html数据属性中指定它们

constmyelements=document.querySelectorAll（'.open-close'）；
函数myOpenFunction（）{
myElements.forEach（元素=>{
elem.style.display=elem.dataset.display | | |“块”；
});
}
函数myCloseFunction（）{
myElements.forEach（元素=>{
elem.style.display='none'；
});
}

。。。
...
…

声明数组时，数组项需要用逗号分隔，而不是分号。是否可以在每个需要影响（显示/隐藏）的元素上都设置一个类，然后就没有硬编码的id1、id2、id3、，不断扩张的身份证？只需找到类和循环的所有div。

if (document.getElementById(myArray[I]) {