Question

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

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

然后，用户可以选择3种技能中的1种来替换他现有的技能并将其升级为更新的技能。它也有一个层系统。您可以从基本技能（第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才能替换烦人的技能。大多数游戏玩家希望当你在升级屏幕上点击技能一次时，它会立即这样做。我不希望我的用户每次想要升级技能时双击。以下是代码。

主要区域或问题

$('#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或3：

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数组？

Javascript：事件处理程序无法正常运行

1 个答案: