javascript - 从 mapbox 隐藏子层名称链接，然后在单击其父层时使其可见

Question

我有一组 mapLayers 来自 sql 中的表。这些 mapLayers 的父层包含一个或多个子层。正在创建的元素 a 是保存图层名称的元素 我想让父层的层名称默认可见，然后仅在单击父层时才使子层名称可见。

我正在寻找的功能类似于自举 Accordion 的功能。我的索引 emp[2] != null 决定图层是否有父级(如果它是子级)。如果它是一个子级，我想隐藏它，然后只在单击父级，但由于“a”标签上没有 ID，我不确定如何设置 onClick 事件。此外，如果我每次创建它时都将 ID 分配给 a，这将意味着 a 将始终具有相同的 ID，这将导致问题。

 $.when(getSecureData("/api/layers/"))
  .then(function (retmaplayers) {
            for (i = 0; i < retmaplayers.length; i++) {
                addLayer(map, L.mapbox.tileLayer(retmaplayers[i][1]), retmaplayers[i][0], i + 1);
                $.each(retmaplayers, function (index, emp) {
                    // pageViewModel.LocationViewModel.parentID(emp.fullname);
                    if (emp[2] != null)
                    {

                        pageViewModel.locationVM.parentID(1)
                }

 function addLayer(map, layer, name, zIndex) {
        var layers = document.getElementById('menu-ui');
        layer.setZIndex(zIndex)
        layer.addTo(map);
        // Create a simple layer switcher that
        // toggles layers on and off.
        var link = document.createElement('a');
        link.href = '#';
        if (zIndex == 1) {
            link.className = 'active';
           // link.class = 'accordion-toggle';
        if(pageViewModel.locationVM.parentID()==1)
       {
          link.style.visibility = "hidden";
        }
        }
        else {
            map.removeLayer(layer);
            this.className = '';
        }
        link.innerHTML = name;
        if (zIndex != 1) {
            link.onclick = function (e) {
                e.preventDefault();
                e.stopPropagation();
                if (map.hasLayer(layer)) {
                    map.removeLayer(layer);
                    this.className = '';
                } else {
                    layer.setOpacity(1.0);
                    map.addLayer(layer);
                    this.className = 'active';
                }
            };
        }
        layers.appendChild(link);

Answer 1

since there is no ID on the "a" tag I am not sure how to set the onClick event

通常，您不会在 Knockout 中使用元素的 id(至少不会在您的 viewmodel 代码中)，特别是您不会设置 onClick 事件。您使用 click binding在可点击元素上。

您似乎没有接受 Knockout 的精神，即您通过对 View 模型执行数据操作来操纵 View 元素。您是在 View 模型代码中而不是在绑定(bind)处理程序中创建 DOM 元素。

您的 addLayer 应该只是将一行插入到 observableArray 中。您应该(可能)为该 observableArray 绑定(bind)一个 foreach，并且在其中一个自定义绑定(bind)处理程序将每个元素转换为一个 map 层。