Question

我有两个功能可以显示和隐藏页面上的元素。我正在尝试使代码更高效，因此，如果将元素添加到页面中，则不必更新每一行。现在的代码就是这样：

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";}
}

反正有这样做吗？

Answer 1

您的myOpenFunction和myCloseFunction正在检查调用函数时元素是否存在，而您的myArray则将元素放入数组脚本运行时-逻辑不同。您可能使用一个id数组，然后在调用open或close函数时，遍历该数组以调用getElementById以提取每个元素，如果存在，则设置其style：

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';
    }
  });
}

Answer 2

您可以做的是使用一个计数器并将其与您的类名连接起来以压入您的数组。您只需要使所有div的ID为div1，div2等即可

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

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

然后在您的函数中使用它：

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

这将解决您的问题。

Answer 3

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

const myElements = document.querySelectorAll('.open-close');

function myOpenFunction() {
  myElements.forEach(elem => {
    elem.style.display = elem.dataset.display || 'block';
  });
}


function myCloseFunction() {
   myElements.forEach(elem => {
    elem.style.display = 'none';
  });
}

<div class="open-close">...</div>
<div class="open-close">...</div>
<div class="open-close" data-display="table">...</div>

编辑：因为我不太了解您的JavaScript经验，所以这里的版本可能更简单，其中包含更多经典的方法和语法：

var myElements = document.getElementsByClassName('open-close');

function myOpenFunction() {
    for (var i = 0; i < myElements.length; i++) {
        var elem = myElements[i];
        var displayAttr = elem.getAttribute('data-display');
        if (displayAttr !== null) {
            elem.style.display = displayAttr;
        } else {
            elem.style.display = 'block';
        }
    }
}

function myCloseFunction() {
    for (var i = 0; i < myElements.length; i++) {
        myElements[i].style.display = 'none';
    }
}

如何在JavaScript函数之外调用数组

3 个答案: