从多个实例切换类 onclick

Question

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

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

我的目标是让 <li> 上的 onclick 切换另一个 <li> 并同时切换 map/cesium。

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 中，彩色方块应该会消失。

感谢任何帮助！

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

Answer 1

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

从多个实例切换类 onclick

Toggle classes onlick from multiple instances

html

javascript

css

onclick

toggle

从多个实例切换 类 onclick

Toggle classes onlick from multiple instances

html

javascript

css

onclick

toggle

从多个实例切换类 onclick