Jquery 动态div显示不正确

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

我的问题是在if语句和for语句完成之前调用

div.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"];
    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);
}

/*图例控件*/
函数控制（）{
dynamicmapLegend=L.对照组({
位置：“右上角”
});
dynamicmapLegend.onAdd=函数（映射）{
var div=L.DomUtil.create（'div'，'legend'），
LegendColor=[“7c7c7c”、“9d2a2a”、“26a82f”]，
legendlabels=[“蓝色”、“红色”、“绿色”]；
div.innerHTML++='+'图例
if（地图图层（丛林））{
//循环我们的密度间隔，并为每个间隔生成一个带有彩色正方形的标签
对于（var i=0；i

这里的一个问题是

.innerHTML

无法按您期望的方式工作。它不像

document.write（）

那样，您可以将内容零碎地写入HTML页面，其中

和

以及介于两者之间的所有内容都单独写出

这可能是早期添加

的原因：如果您分配到

.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);
}

/*图例控件*/
函数控制（）{
dynamicmapLegend=L.对照组({
位置：“右上角”
});
dynamicmapLegend.onAdd=函数（映射）{
var div=L.DomUtil.create（'div'，'legend'），
LegendColor=[“7c7c7c”、“9d2a2a”、“26a82f”]，
legendlabels=[“蓝色”、“红色”、“绿色”]，
html=''；
html++'+'图例
if（地图图层（丛林））{
//循环我们的密度间隔，并为每个间隔生成一个带有彩色正方形的标签
对于（var i=0；i
Ah明白了，坚持了10个小时，需要一个新的视角：），效果非常好，谢谢大家，很高兴这有帮助！我听到你说的10个小时。不要告诉任何人，但在我的情况下，有时会超过20个小时！