动态 div 显示不正确

Question

我有一个动态图例被添加到传单地图中。

我的问题是 div.innerHTML +='</div>' 在 if 语句和 for 语句完成之前被调用。

我一直在研究回调，但看了几个小时后我真的卡住了，似乎在兜圈子

/*Legend Control */
function maplegendControl() {
  dynamicmapLegend = L.control({
    position: 'topright'
  });
  dynamicmapLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'legend'),
      legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],
      legendlabels = ["Blue", "Red", "Green"];
    div.innerHTML += '<div class="legend-inner-top">' + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">Legend</strong></div>' + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closeLegend"></button></div>' + '</div>' + '<div class="legend-inner-bottom">'
    if (map.hasLayer(jungle)) {
      // loop through our density intervals and generate a label with a colored square for each interval
      for (var i = 0; i < legendcolors.length; i++) {
        div.innerHTML +=
          '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";
      }
    }
    if (map.hasLayer(tropical)) {
      div.innerHTML += '<i><img src="assets/img/legend-tropical.png" alt="Tropical Icon" height="18" width="18"></i>' + 'Tropical' + "<div style='margin-top: 10px;'></div>";
    }
    if (map.hasLayer(forest)) {
      div.innerHTML += '<i><img src="assets/img/legend-forest.png" alt="Forest Icon" height="18" width="18"></i>' + 'Forest' + "<div style='margin-top: 10px;'></div>";
    }
    div.innerHTML += '</div>'
    return div;
  }
  dynamicmapLegend.addTo(map);
}

Answer 1

这里的一个问题是 .innerHTML 没有按照您期望的方式工作。它不像 document.write() 那样，您可以将内容零碎地写入 HTML 页面，<div> 和 </div> 以及介于两者之间的所有内容分别写出来。

这可能就是 </div> 被提前添加的原因：如果您分配到 .innerHTML 并且不关闭标签，浏览器会为您完成。 onAdd() 顶部附近的第一个 .innerHTML 赋值不会像 document.write() 那样让标签保持打开状态，它会在那里关闭标签。这就是为什么下面写的其他标签没有嵌套在里面的原因。

如果您使用 .innerHTML，您应该创建一个包含完整 DOM 片段的字符串，然后在构建该字符串后，将整个字符串分配给 .innerHTML。

从您现在的代码开始，直接翻译为：

/*Legend Control */
function maplegendControl() {
  dynamicmapLegend = L.control({
    position: 'topright'
  });
  dynamicmapLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'legend'),
      legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],
      legendlabels = ["Blue", "Red", "Green"],
      html = '';
    html += '<div class="legend-inner-top">' + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">Legend</strong></div>' + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closeLegend"></button></div>' + '</div>' + '<div class="legend-inner-bottom">'
    if (map.hasLayer(jungle)) {
      // loop through our density intervals and generate a label with a colored square for each interval
      for (var i = 0; i < legendcolors.length; i++) {
        html +=
          '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";
      }
    }
    if (map.hasLayer(tropical)) {
      html += '<i><img src="assets/img/legend-tropical.png" alt="Tropical Icon" height="18" width="18"></i>' + 'Tropical' + "<div style='margin-top: 10px;'></div>";
    }
    if (map.hasLayer(forest)) {
      html += '<i><img src="assets/img/legend-forest.png" alt="Forest Icon" height="18" width="18"></i>' + 'Forest' + "<div style='margin-top: 10px;'></div>";
    }
    html += '</div>';
    div.innerHTML = html;
    return div;
  }
  dynamicmapLegend.addTo(map);
}

动态 div 显示不正确

Dynamic div displaying incorrectly

html

css

jquery

leaflet