JS：私は1回ではなく2回活性化する機能を持っていますか？

Question

私はビデオゲームを持っています。プレイヤーはそれらをアップグレードすることを選択したときに最大3つのスキルを選択できます。あなたのスキル1をアップグレードする時間を想像してください。ラジアルセレクターがポップアップし、3つのスキルを選択するオプションが与えられます。

ユーザーが任意のスキルに1時間をクリックした場合、私は以下の持っている機能が動作します。しかし、テスト段階では、私はそれを有効にするために "私をアップグレード"ボタンをクリックし、 "ストライク"を選択し、 "防御"（または複数のスキル）。その後、ラジアルセレクタの最初のスキルをクリックしました。その1スキルがアップグレードされる代わりに、両方のスキルがアップグレードされました。

ストライクがDeepcut

に置き換えられますが一つだけのスキルが両方ではなく、アップグレードされなければならないのストーンウォール

に置き換えます守ります。

以下の機能を確認したところ、複数のボタンをクリックした後、両方のボタンが同時に更新される理由を理解できません。私はそれが一緒にリストを追加していたと仮定していますが、私はconsole.log（リスト）をしたときに、私はswitch文でコード化されたスキルを参照していました。

function radialSelector(object){ 
    var list; 
    switch (object){ 
     case strike: 
     list = [deepcut, balancedstrike, fury]; 
     break; 
     case defend: 
     list = [stonewall, digin, holdtheline]; 
     break; 
     default: 
     console.log("radialSelector() has set its switch statement to default") 
    } 

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


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

余分なコード

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

function addSkillButton(object) { 
     var button = document.createElement("button"); 
     var target = dom.el("skillListWrapper"); 
     button.textContent = object.name; 
     button.setAttribute("id", object.name); 
     button.setAttribute("class", "selection"); 

    switch(object.category){ 
     case "Attack": 
     target.insertBefore(button, target.children[0]); 
     break; 
     case "Defend": 
     target.insertBefore(button, target.children[1]); 
     break; 
     case "Healing": 
     target.insertBefore(button, target.children[2]); 
     break; 
     case "Debuff": 
     target.insertBefore(button, target.children[3]); 
     break; 
     default: 
     console.log("addSkillButton() - Case Statement has switched to default"); 
    } 
} 

Answer 1

両方のスキルがアップグレードされます理由は、あなたがスキルを選択する]をクリックするたびに、あなたは#upgradeSkillsBarにクリックハンドラを添付していることです。これらは蓄積されます。つまり、ハンドラの割り当ては、以前に割り当てられたハンドラを置き換えるのではなく、新しいイベントをハンドラのリストに追加してクリックイベントで実行します。

このように、この蓄積を避ける.on()前.off()を呼び出すために：

$('#upgradeSkillsBar').off('click').on('click', '#position1', function(){ 
    //... etc