如何实现点击地图各州元素打开对应专属模态弹窗？

问题描述 #

点击美国地图上的州元素时，打开该州对应的专属弹窗。当前已有基础点击事件绑定代码，同时存在hawaii、alaska等州的独立弹窗HTML结构与CSS样式，但尝试的代码片段不确定是否正确，需要指导正确实现方式。

当前使用的点击事件绑定代码：

$("path, circle").on('click', function(e) {
  $('#info-box').css('display', 'block');
  $('#info-box').html($(this).data('info'));
  
  $(".close").click(function() {
    $('#info-box').hide();
  });
  
  $(".close-popup").click(function() {
    $('#info-box').hide();
  });
});

尝试的代码片段：

$(`#info-box${$('.popup').index(this) + 1}`).addClass('visible');

var id = $(this).data('id');
   ('#'+id).popup('toggle');

正确实现步骤 #

1. 规范HTML结构 #

确保每个州的弹窗有唯一ID，且与地图元素的data-id属性一一对应，示例如下：

<!-- 地图元素示例 -->
<path data-id="hawaii" ...></path>
<circle data-id="alaska" ...></circle>

<!-- 弹窗示例 -->
<div id="hawaii" class="state-popup" style="display:none;">
  <button class="close">×</button>
  <!-- 夏威夷州专属内容 -->
</div>
<div id="alaska" class="state-popup" style="display:none;">
  <button class="close">×</button>
  <!-- 阿拉斯加州专属内容 -->
</div>

2. 优化JS事件逻辑 #

• 避免在点击事件内重复绑定关闭事件（会导致多次绑定，触发多次隐藏操作）
• 直接通过data-id匹配对应弹窗，逻辑更清晰

修改后的代码：

// 绑定地图元素点击事件
$("path, circle").on('click', function(e) {
  // 先隐藏所有弹窗，防止多个弹窗同时显示
  $('.state-popup').hide();
  // 获取当前点击元素对应的弹窗ID
  const targetPopupId = $(this).data('id');
  // 显示对应弹窗
  $(`#${targetPopupId}`).show();
});

// 绑定关闭按钮事件（仅绑定一次）
$(".close, .close-popup").on('click', function() {
  // 找到当前按钮所属的弹窗并隐藏
  $(this).closest('.state-popup').hide();
});

3. 适配自定义样式逻辑 #

如果你的弹窗是通过visible类控制显示（而非直接操作display属性），只需把代码中的show()/hide()替换为addClass('visible')/removeClass('visible')即可：

// 点击地图元素时
$(`#${targetPopupId}`).addClass('visible');

// 点击关闭按钮时
$(this).closest('.state-popup').removeClass('visible');

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