如何在 JSON 数据中 desc 字段为空时动态隐藏对应 HTML 元素-js教程-PHP中文网

当 GeoJSON 中 properties.desc 为空字符串时，通过 JavaScript 动态隐藏 .popup-desc 及其子元素 .div24，避免页面显示空白区域。

当 geojson 中 `properties.desc` 为空字符串时，通过 javascript 动态隐藏 `.popup-desc` 及其子元素 `.div24`，避免页面显示空白区域。

在构建基于地图的弹窗（如 Leaflet 或 Mapbox 中的 popup）时，若后端或 GeoJSON 数据中的描述字段（如 desc）为空，直接插入空内容会导致

和

占据无意义的垂直空间，影响 UI 整洁性与用户体验。此时需在生成 HTML 前进行逻辑判断，动态控制 DOM 元素的可见性。

正确做法不是调用不存在的 .hide() 方法（该方法属于 jQuery，原生 JS 不支持），而是通过修改 style.display 属性为 "none" 实现隐藏。以下是推荐的实现方式：

// 假设 e 是包含 features 的事件对象（如 map.on('click', e => {...})）
const descValue = e.features[0].properties.desc;

// 构建基础 HTML 字符串（不含 popup-desc 部分）
let popupHTML = `
  <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>
    @@##@@
    <div class="popup-type">
      <div class="div23">${e.features[0].properties.adress}</div>
    </div>
`;

// 仅当 desc 非空时才拼接 popup-desc 结构
if (descValue && descValue.trim() !== '') {
  popupHTML += `
    <div class="popup-desc">
      <div class="div24">${descValue}</div>
    </div>
  `;
}

popupHTML += `</div>`; // 闭合外层 popup

// 将生成的 HTML 设置到弹窗（以 Leaflet 为例）
popup.setContent(popupHTML);

✅ 优势说明：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

更健壮：使用 trim() 排除纯空白字符（如空格、换行）导致的“假非空”；
更高效：服务端逻辑前置，避免渲染无用 DOM 节点，减少重排重绘；
更清晰：HTML 结构与业务逻辑解耦，可读性和可维护性更高。

⚠️ 注意事项：

若必须在 HTML 插入后动态隐藏（例如已用模板引擎预渲染），请确保 DOM 已挂载再操作：

const popupElement = document.querySelector('.popup'); // 或通过其他唯一标识获取
if (popupElement) {
  const popupDesc = popupElement.querySelector('.popup-desc');
  if (popupDesc && !e.features[0].properties.desc?.trim()) {
    popupDesc.style.display = 'none';
  }
}