Mapbox交互式地图年份切换后政党按钮无法加载数据求助

排查方向与修复建议： #

• 同步数据源引用：确认年份切换按钮触发时，存储当前选举数据的全局变量（如2021ElectionData/2024ElectionData）已被正确切换，政党按钮的点击事件需调用当前选中年份的数据源，而非固定的旧年份数据。
• 检查事件绑定逻辑：若政党按钮为动态生成或年份切换后DOM有更新，需重新绑定点击事件；若采用事件委托，确保委托父元素未被替换，且事件处理函数能正确获取最新年份值。
• 排查变量作用域：验证年份变量是否处于全局作用域，或在事件处理函数中能正确访问到更新后的值——如果年份变量是局部变量，政党按钮的回调可能无法获取到最新状态。

代码对比重点： #

将新旧代码中以下部分做针对性对比：

• 年份切换按钮的事件处理函数，查看是否正确更新了当前年份数据的存储变量
• 政党按钮的事件处理函数，确认是否使用动态年份数据引用，而非硬编码固定年份
• 数据加载逻辑，检查年份切换时是否重新初始化了相关Mapbox图层或数据源

示例修复思路： #

如果原代码中政党按钮固定调用旧年份数据，可修改为根据当前选中年份动态获取：

// 全局存储当前选中年份
let currentYear = '2021';

// 年份切换按钮事件
document.getElementById('year-2021').addEventListener('click', () => {
  currentYear = '2021';
  // 重置现有图层（按需执行）
  map.removeLayer('party-data-layer').removeSource('party-data-source');
});
document.getElementById('year-2024').addEventListener('click', () => {
  currentYear = '2024';
  map.removeLayer('party-data-layer').removeSource('party-data-source');
});

// 政党按钮事件，动态匹配数据源
document.getElementById('party-psc').addEventListener('click', () => {
  const targetData = currentYear === '2021' ? 2021PSCData : 2024PSCData;
  // 执行数据加载到Mapbox的逻辑
  renderPartyData(targetData);
});

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