javascript - 动态函数调用不变

我有这个jsfiddle，我正在尝试使用对象键来调用不同的函数。

即

  var LaneWizard = {
    targets: {
      Lane: $('.lane-colors span'),
      AltLane: $('.alt-lane-colors span')
    },
    prepTargets: function() {
      for(var t in LaneWizard.targets) {
        LaneWizard.targets[t].on('click', function() {
          LaneWizard['change'+t+'Color']($(this));
        });
      }
    }
  }

在此示例中，有两（2）个同心圆。外圈应由第一行（车道颜色）控制，内圈应由第二行（备用车道颜色）控制。

我不知道为什么它们都改变了内圈的颜色。

最佳答案

值“ t”始终具有最后一个值。
做这样的事情：

prepTargets: function() {
  for(var t in LaneWizard.targets) {
    LaneWizard.attachClick(t);
  }
},
attachClick: function(t) {
  LaneWizard.targets[t].on('click', function() {
    LaneWizard['change'+t+'Color']($(this));
  });
}