Javascript：事件处理程序无法正常工作

Question

我正在为我的JavaScript学习开发一个小型迷你游戏，但我遇到了事件处理程序的问题。

我有一个系统，当你点击升级技能时打开一个子径向，然后选择一个技能按钮（罢工，防御，治疗，debuff）。

然后用户可以选择1 3技能的选项，以取代其现有的技能，并将其升级到新的更好的。它也有一个层次系统。你从基本技能开始（第1层），并且可以将每项技能一直升级到第3层。在上图中，技能列表适用于第3层技能。正如你所看到的，2级技能已经被设定（Poision Strike）并且取代了“Strike”。

我遇到的问题是我的代码。当你选择一项技能时，例如：位置1（Poision Strike），技能将升级。但是，如果您在尝试访问第3层时再次在位置2或3上单击升级，则会出现错误。

javascript.js:628 Uncaught TypeError: Cannot read property 'parentNode' of null 
    at removeSkillButton (javascript.js:628) 
    at HTMLDivElement.<anonymous> (javascript.js:543) 
    at HTMLDivElement.e (jquery-3.1.0.min.js:3) 
    at HTMLDivElement.dispatch (jquery-3.1.0.min.js:3) 
    at HTMLDivElement.q.handle (jquery-3.1.0.min.js:3) 

我必须双击位置2或3才能取代烦人的技能。大多数玩家希望在升级屏幕上单击技能1次时，它会立即执行此操作。我不希望我的用户在每次升级技能时双击。以下是代码。

主要区域或问题

$('#upgradeSkillsBar').one('click', '#position1', function(){ 
    removeSkillButton(object); 
    addSkillButton(skillList[0]); 
    removeRadialSubMenu(); 
}); 

$('#upgradeSkillsBar').one('click', '#position2', function(){ 
    removeSkillButton(object); 
    addSkillButton(skillList[1]); 
    removeRadialSubMenu(); 
}); 

$('#upgradeSkillsBar').one('click', '#position3', function(){ 
    removeSkillButton(object); 
    addSkillButton(skillList[2]); 
    removeRadialSubMenu(); 
}); 

整函数

function radialSelector(object){ 
    var skillList; 
    switch (object){ 
     case strike: 
      skillList = [poisonstrike, bluntstrike, quickstrike]; 
      break; 
     case poisonstrike: 
      skillList = [venom, immunity, toxic]; 
      break; 
     case bluntstrike: 
      skillList = [eviscerate, bruteforce, revenge]; 
      break; 
     case quickstrike: 
      skillList = [nimblelance, whirlwind, backstab]; 
      break; 
     case defend: 
      skillList = [holdtheline, quickrecovery, repairarmor]; 
      break; 
     case holdtheline: 
      skillList = [stronghold, titan, heavyarmor]; 
      break; 
     case quickrecovery: 
      skillList = [impenetrable, untouchable, fortifiedarmor]; 
      break; 
     case repairarmor: 
      skillList = [stonewall, stout, unbreakablearmor]; 
      break; 
     case cure: 
      skillList = [cura, blessing, healingwind];  
      break; 
     case debuff: 
      skillList = [lowerstrength, lowerarmor, loweragility]; 
      break; 
     default: 
      console.log("radialSelector() has set its switch statement to default") 
    } 

    for (var i=0, l=skillList.length; i<l; i++) { 
     radialSubMenuSkills("position"+(i+1), skillList[i]); 
    } 


    $('#upgradeSkillsBar').one('click', '#position1', function(){ 
     removeSkillButton(object); 
     addSkillButton(skillList[0]); 
     removeRadialSubMenu(); 
    }); 

    $('#upgradeSkillsBar').one('click', '#position2', function(){ 
     removeSkillButton(object); 
     addSkillButton(skillList[1]); 
     removeRadialSubMenu(); 
    }); 

    $('#upgradeSkillsBar').one('click', '#position3', function(){ 
     removeSkillButton(object); 
     addSkillButton(skillList[2]); 
     removeRadialSubMenu(); 
    }); 
} 

线628

function removeSkillButton(object) { 
    var x = dom.el(object.name); 
    console.log(object); 
    x.parentNode.removeChild(x); 
} 

控制台登录一次升级点击位置1：

javascript.js:627 Object {name: "Strike", tier: 1, category: "Attack", description: "Basic Attack", imageURL: undefined} 

在第二次升级点击位置2或

控制台登录：

javascript.js:627 Object {name: "Strike", tier: 1, category: "Attack", description: "Basic Attack", imageURL: undefined} 
javascript.js:628 Uncaught TypeError: Cannot read property 'parentNode' of null 
    at removeSkillButton (javascript.js:628) 
    at HTMLDivElement.<anonymous> (javascript.js:543) 
    at HTMLDivElement.e (jquery-3.1.0.min.js:3) 
    at HTMLDivElement.dispatch (jquery-3.1.0.min.js:3) 
    at HTMLDivElement.q.handle (jquery-3.1.0.min.js:3) 

Answer 1

我觉得

switch (object){ 

需求是

switch (object.name){ 

，因为你似乎可以用object作为实际对象，和object.name作为一个字符串。

是否有可能因为这个原因，switch语句没有正确更新skillList数组？