将其作为JavaScript函数的一部分编写的更有效的方法？

我正在尝试编写一个JavaScript函数，它将同时隐藏多个ID。由于我将进入50个左右的ID，对于任何给定的函数都需要隐藏这些ID，所以我不希望有不必要的代码。我有下面这样的东西，但必须有一种方法将所有这些行合并成一行，不是吗

document.getElementById("aMap").style.display = "none";
document.getElementById("aList").style.display = "none";
document.getElementById("bMap").style.display = "none";
document.getElementById("bList").style.display = "none";
document.getElementById("cMap").style.display = "none";
document.getElementById("cList").style.display = "none";

好的，谢谢大家。下面显示我的更新代码。它不起作用，因为我肯定我做错了什么。目标是使函数显示由ID标识的2个元素，并同时隐藏所有其他ID：

function zShowHideRest() {
    var zOther = ["aMap", "aList", "bMap", "bList", "cMap", "cList"];
    zOther.forEach.getElementById().style.display = "none";
    document.getElementById("zMap").style.display = "block";
    document.getElementById("zList").style.display = "block";
}

---

我是在大概的范围内，还是我所做的有点离谱？

只需将所有ID放在一个数组中，并使用for-of或forEach循环对它们进行迭代

const arr = [your list of ids];
for(const a of arr) {
 document.getElementById(a).style.display = "none";
}

---

使用循环有助于减少重复代码：

const-id=[“aMap”、“aList”、“bMap”、“bList”、“cMap”、“cList”]；
弗雷赫女士(
功能（id）{
常量元素=document.getElementById（id）；
if（元素）{
element.style.display=“无”；
}
}
);

document.getElementById（“aMap”）.style.display=“无”；
document.getElementById（“aList”）.style.display=“无”；
document.getElementById（“bMap”）.style.display=“无”；
document.getElementById（“bList”）.style.display=“无”；
document.getElementById（“cMap”）.style.display=“无”；
document.getElementById（“cList”）.style.display=“无”；
//id-REF的数组方法Sebastian-Simon
让arrID=[“aMap”、“aList”、“bMap”、“bList”、“cMap”、“cList”，]
//循环的方法1
对于（变量i=0；i{
document.getElementById（id）.style.display=“无”；
});
//箭头功能不适用于任何IE
//我的建议
//给你的元素一个类的例子：“隐藏”
document.getElementsByClassName（“隐藏”）.style.display=“无”；
quickFix：您可以使用for循环，但使用类名可以使没有id数组的元素数组具有类名隐藏
让elementsHasHide=document.getElementsByClassName（“隐藏”）；
for（变量i=0；i

您应该使用Class而不是ID

var myClasses = document.querySelectorAll('.ids_list'),
        i = 0,
        l = myClasses.length;

    for (i; i < l; i++) {
        myClasses[i].style.display = 'none';
    }

var myClasses=document.querySelectorAll（'.ids_list'），
i=0，
l=myClasses.length；
对于（i；i

或

var list=document.getElementsByClassName（'my-class'））
对于（变量i=0；i

html:

---

只需更新js

就可以使用一组ID。嘿，谢谢你的快速回复。不过我对Javascript还不熟悉，不知道这意味着什么/如何做到这一点？可能是重复的不确定它是否相同。。。我想让这些元素受到某些东西的影响，而不是影响某些东西。不管你具体想对这些元素做什么。您询问了如何以更短的方式编写此代码。基本的方法完全一样。我想这可能会有所帮助。我要试试这个。谢谢你，谢谢所有回复你的人。今晚晚些时候我会回来报告。这也是helpful@SebastianSimon哦，我明白了。太多的jquery弄乱了我的普通脚本，你知道jquery是如何工作的啊，对不起，我都修好了

document.getElementById("aMap").style.display = "none";
document.getElementById("aList").style.display = "none";
document.getElementById("bMap").style.display = "none";
document.getElementById("bList").style.display = "none";
document.getElementById("cMap").style.display = "none";
document.getElementById("cList").style.display = "none";

// method of array of id REF Sebastian Simon

let arrID = ["aMap", "aList", "bMap", "bList", "cMap", "cList",]

// method 1 for loop

    for (var i = 0; i < arrID.length; i++) {
        document.getElementById(arrID[i]).style.display = "none";
    };

// method 2 for loop

    arrID.forEach((id) => {
     document.getElementById(id).style.display = "none";
    });

    // arrow function not working any of IE

// my suggest

// give your elements same class example:"hide"

document.getElementsByClassName("hide").style.display = "none"; 

quickFix: you either use for loop but using class name makes without array of id but i have array of elements which is has classname hide

let elementsHasHide = document.getElementsByClassName("hide");
for (var i = 0; i < elementsHasHide.length; i++) {
    elementsHasHide[i].style.display="hide"
}

var myClasses = document.querySelectorAll('.ids_list'),
        i = 0,
        l = myClasses.length;

    for (i; i < l; i++) {
        myClasses[i].style.display = 'none';
    }

var list = document.getElementsByClassName('my-class')
    for (var i = 0; i< list.length; i++){
     list[i].style.display = "none";
    }   

<div class="ids_list" id="aMap"></div>
<div class="ids_list" id="aList"></div>
<div class="ids_list" id="bMap"></div>
<div class="ids_list" id="bList"></div>
<div class="ids_list" id="cMap"></div>
<div class="ids_list" id="cList"></div>