当JSON中desc字段为空时，如何隐藏指定div元素？

需求 #

当buildings.geojson文件里features[0].properties.desc的值为空时，隐藏HTML中的.popup-desc和.div24元素。

现有代码 #

HTML代码 #

<div class="popup">
    <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';">
        <div class="div21">'+e.features[0].properties.status+'</div>
        <div class="popup-statusdate">
            <div class="div21">'+e.features[0].properties.date+'</div>
        </div>
    </div>
    <img class="popup-img-icon" src="'+e.features[0].properties.img+'"onclick="window.open(this.src)" style="cursor: pointer;"/>
    <div class="popup-type">
        <div class="div23">'+e.features[0].properties.adress+'</div>
    </div>
    <div class="popup-desc">
        <div class="div24">'+e.features[0].properties.desc+'</div>
    </div>
</div>

buildings.geojson代码片段 #

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "status": "Demolished",
        "fill": "#C93535",
        "line": "#E63131",
        "img": "15.jpg",
        "date": "28.03.22",
        "adress": "School №51",
        "desc": ""
      },
      "id": 1
    }
  ]
}

尝试过的无效代码 #

if (e.features[0].properties.desc == ''){
  popup-desc.hide();
  div24.hide();
}

解决方法 #

你的代码无效核心是两个问题：

1. 元素选择错误：popup-desc和div24是类名，不能直接当变量用，必须用DOM选择器获取元素。
2. 原生JS无.hide()方法：要隐藏元素得修改元素的样式属性。

修正后的JavaScript代码 #

// 先获取目标DOM元素
const popupDesc = document.querySelector('.popup-desc');
const div24 = document.querySelector('.div24');

// 严谨判断desc是否为空（trim排除纯空格情况）
if (e.features[0].properties.desc.trim() === '') {
  // 方式1：彻底隐藏，元素不占页面空间
  popupDesc.style.display = 'none';
  div24.style.display = 'none';

  // 方式2：隐藏但保留元素原本的空间位置
  // popupDesc.style.visibility = 'hidden';
  // div24.style.visibility = 'hidden';
}

额外优化：生成HTML时直接处理 #

如果是动态拼接HTML，也可以在生成阶段就判断，省掉后续DOM操作：

<div class="popup">
    <!-- 其他代码保持不变 -->
    '+ (e.features[0].properties.desc.trim() ? `<div class="popup-desc"><div class="div24">${e.features[0].properties.desc}</div></div>` : '') +'
</div>

内容的提问来源于stack exchange，提问作者Nikko Mwordlling