对函数中的变量进行分组

我有一种感觉，这是如此明显，当（如果）解决时我会感到羞愧 - 但我就是无法让它发挥作用。

我有一个 html+javascript 页面，其中包含多个项目，所有项目都需要通过用户点击来显示或隐藏。 所以我有 x 数量的 div，例如：

<div id="myDIVA" style="display:none;">blabla 1</div>
<div id="myDIVB" style="display:none;">blabla 2</div>
<div id="myDIVC" style="display:none;">blabla 3</div>

并且通过单击 div 来隐藏和/或显示它们：

<div onClick="myClickFunctionA()">Show only ONE</div>
<div onClick="myClickFunctionB()">Show only TWO</div>
<div onClick="myClickFunctionC()">Show only THREE</div>

简单的脚本如下：

<script>
    var a = document.getElementById('myDIVA');
    var b = document.getElementById('myDIVB');
    var c = document.getElementById('myDIVC');
function myClickFunctionA() {
        a.style.display = 'block';
        b.style.display = 'none';
        c.style.display = 'none';
}
function myClickFunctionB() {
        a.style.display = 'none';
        b.style.display = 'block';
        c.style.display = 'none';
}
</script>

我想做的是能够对变量进行分组，这样我就可以拥有如下功能：

function myClickFunctionA() {
        a.style.display = 'block';
        b + c.style.display = 'none';
}

我有很多div！因此，这可能看起来很愚蠢，但对我来说，能够对变量进行“分组”以方便编辑是很有意义的。

所以我希望有人能提供一个简单的解决方案:-) 谢谢

数组可能是一个很好的用例：

var elemsById = ["myDIVA","myDIVB","myDIVC"]
 .map(id=>[id,document.getElementById(id)]);

因此，每当我们想要显示这些元素之一时，我们都会迭代所有这些元素，并根据它们的 id 隐藏/显示它们：

function showThisAndHideRest(showId){
  elemsById.forEach(function([id,el]){
    el.style.display=id===showId?"block":"none";
  });
}

所以你可以这样做：

showThisAndHideRest("myDIVA");

注意：上层使用了一些很酷的 ES6 功能，但尚未得到所有浏览器的支持。实际上不需要将 id 存储在数组中，因为它已经是 el 的一部分（el.id），但我只是想使用一些参数解构......

Run http://jsbin.com/woxebemico/edit?output