javascript - 从多个实例点击切换类

Question

所以我遇到了关于切换功能的问题。在我目前的情况下，我希望能够打开和关闭部分基于 Web 的界面(显示:无和阻止)。我让它从其中一个窗口工作，但我遇到的障碍是当我向相同的函数添加多个调用时。我从使用 getElementById 恢复为使用 getElementsByClass。据我所知，这没有造成任何问题。然而，当我添加第二个菜单时，事情开始出现故障。

我将在下面粘贴我的代码和一个 jsFiddle。

我的目标是在 <li> 上进行 onclick切换另一个 <li>并同时切换 map /铯。

HTML

<div id="map">
    <nav id="primary_nav_wrap">
        <ul>
          <li><a href="#">=</a>
            <ul>
              <li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
              <li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
              <li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
              <li><a class="buttonCesium2" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
             </ul>
           </li>
        </ul>
    </nav>
</div>
<div id="cesium">
    <nav id="primary_nav_wrap">
        <ul>
          <li><a href="#">=</a>
            <ul>
              <li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
              <li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
              <li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
              <li><a class="buttonCesium2" href="#" onclick="toggleCesium('block')">Toggle Cesium</a></li>
            </ul>
          </li>
        </ul>
    </nav>

CSS(最小但 JsFiddle 明白了要点)

#map{
  height:100px;
  width:100px;
  background-color:red;
}
#cesium{
  height:100px;
  width:100px;
  background-color:blue;
} 

JS

function toggleMap(display) {
            var elem = document.getElementById("map");
            var buttonMap = document.getElementsByClassName("buttonMap");
            elem.style.display = display;
            buttonMap.style.display = display;
            if (buttonMap.style.display === 'none'){
                buttonMap2.style.display = 'block';
            }
            else if (buttonMap.style.display === 'block'){
                buttonMap2.style.display = 'none';
            }
};

function toggleCesium(display) {
            var elem = document.getElementById("cesium");
            var buttonCesium = document.getElementsByClassName("buttonCesium");
            elem.style.display = display;
            buttonCesium.style.display = display;
            if (buttonCesium.style.display === 'none'){
                buttonCesium2.style.display = 'block';
            }
            else if (buttonCesium.style.display === 'block'){
                buttonCesium2.style.display = 'none';
            }
};

在JsFiddle ，彩色 block 应该消失。

感谢任何帮助!

(PS!我们可以安全地假设用户将使用最新的浏览器)

Answer 1

https://jsfiddle.net/rz4wu4qd/18/评论中提到的一些可行的解决方案。getElementsByClassName 返回一个数组，因此您需要遍历它，例如使用 for 循环。