使用$.each遍历修改地图颜色仅生效阿拉斯加，求排查解决

我一眼就看出问题所在了——你在$.each循环里每次迭代都重新初始化了地图插件，这就导致只有第一个符合条件的州（阿拉斯加）被处理，后续的循环调用插件初始化根本不会生效，因为插件已经绑定到地图元素上了。另外，你else分支里的变量定义也没起到实际作用，完全没把绿色样式应用到地图上。

修复步骤： #

1. 先遍历所有州，提前收集好所有需要设置的样式规则，把红/绿州的样式都整理到一个对象里
2. 只在遍历完成后，一次性调用地图插件，把整理好的样式对象传进去

修复后的代码： #

$(document).ready(function() {
  // 先创建一个空对象，用来存储所有州的样式
  const stateStyles = {};

  // 遍历所有州，填充样式对象
  $.each(states, function(i, stateData) {
    const stateAbb = stateData.Abb;
    if (stateData.wins < 35) {
      // 胜率低于35%设为红色
      stateStyles[stateAbb] = { fill: "red" };
    } else {
      // 胜率高于等于35%设为绿色
      stateStyles[stateAbb] = { fill: "green" };
    }
  });

  // 一次性初始化地图插件，传入所有州的样式
  $('#map').brett({
    stateSpecificStyles: stateStyles,
    'mouseoverState': {
      'HI': function(event, data) {
        // return false;
      }
    },
    'click': function(event, data) {
      // 这里修复了闭包陷阱：从states数组匹配点击的州数据
      const clickedState = states.find(s => s.Abb === data.abbreviation);
      $('#alert')
        .text('Click ' + data.name + ' on map 1')
        .stop()
        .css('backgroundColor', '#ff0')
        .animate({ backgroundColor: '#ddd' }, 1000)
        .append(`<p><strong>${clickedState.name}</strong> has a winning percentage of <span class="percentage">${clickedState.wins}%</span></p>`);
    }
  });
});

额外说明： #

• 原代码里点击事件用的currentState是循环最后一次的州数据，这是典型的闭包陷阱！修复后改用states.find来匹配点击的州，确保显示正确的胜率数据
• 把样式收集和插件初始化分开，既符合插件的使用逻辑，也避免了重复初始化导致的问题

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