javascript - 点数不显示时，如何将菜单按钮变成白色？

Question

我写了css来定义菜单的颜色，当不同的 Action 发生时，菜单中的按钮会显示不同的颜色。但是，由于我想将按钮的颜色设置为与点的颜色相同，所以我在生成按钮时在 JS 中定义了背景颜色。因此，无论点是否显示，按钮的背景颜色都不会改变。如何在点不显示的情况下将菜单按钮变成白色？

var toggleableLayerIds = ['Restaurants', 'Food', 'Shopping', 'Travel', 'Leisure', 'Night Life', 'Beauty & Health', 'Local Services'];

var LayerColors = ['#F44336', '#FF9800', '#FFEB3B', '#4CAF50', '#03A9F4', '#3F51B5', '#9C27B0', '#607D8B'];

for (var i = 0; i < toggleableLayerIds.length; i++) {
  var id = toggleableLayerIds[i];
  var color = LayerColors[i]

  var link = document.createElement('a');
  link.href = '#';
  link.className = 'active';
  link.textContent = id;
  link.style.backgroundColor = color;

  link.onclick = function(e) {
    var clickedLayer = this.textContent;
    e.preventDefault();
    e.stopPropagation();

    var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

    if (visibility === 'visible') {
      map.setLayoutProperty(clickedLayer, 'visibility', 'none');
      this.className = '';
    } else {
      this.className = 'active';
      map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
    }
  };

  var layers = document.getElementById('menu');
  layers.appendChild(link);
}

#menu {
  background: #fff;
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 40px;
  border-radius: 3px;
  width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
}

#menu a {
  font-size: 12px;
  color: #404040;
  display: block;
  margin: 0;
  padding: 0;
  padding: 3px;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  text-align: center;
}

#menu a:last-child {
  border: none;
}

#menu a:hover {
  background-color: #f8f8f8;
  color: #404040;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}

#menu a.active {
  background-color: #FBC02D;
  color: #ffffff;
}

#menu a.active:hover {
  background: #9E9E9E;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}

<nav id="menu"></nav>

This picture shows the map I have made yet

Answer 1

如果 map 上有当前图层的任何点，您需要检查循环。如果没有点，则使用 color: #fff; 或 display: none; 或任何你想要的方式将 CSS 类添加到当前按钮。