Динамические вызовы функций не меняются

Question

У меня есть этот 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) концентрических круга. Внешний круг должен контролироваться первым рядом (Lane Color), а внутренний круг - вторым рядом (Alternate Lane Colours).

Я не могу понять, почему они все меняют цвет внутреннего круга.

Answer 1

Значение '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));
  });
}