アニメーションCC HTML5が文字列を呼び出してグローバル変数を変更しようとしています

Question

私はベテランのアクションスクリプトコーダーで、JavaScriptで最初のスタブをとっています。ほとんどの場合、それほど複雑ではありませんが、トグルのような多数のボタンを作成しているので、いくつかの問題にぶつかりました。これまでのコードはここにあります（私はそれらの束を削除しましたが、約5つではなく約20種類あります）。

var aOneOn = false; 
var aTwoOn = false; 
var aThreeOn = false; 
var aFourOn = false; 
var aFiveOn = false; 

this.One.addEventListener("click", highlightButton.bind(this)); 
this.Two.addEventListener("click", highlightButton.bind(this)); 
this.Three.addEventListener("click", highlightButton.bind(this)); 
this.Four.addEventListener("click", highlightButton.bind(this)); 
this.Five.addEventListener("click", highlightButton.bind(this)); 


function highlightButton(event) 
{ 
    console.log("You have selected a button " + event.currentTarget.name); //Three 
    var newName = "a" + event.currentTarget.name + "On"; 
    console.log("the buttons new name is " + newName); //aThreeOn 
    console.log("the correct answer is " + aTwoOn); //false 
    console.log("the button is currently " + this[newName]); //undefined 
    if(this[newName] == true) 
    { 
     console.log("we should be turning it false now"); 
     this[newName] = false; 
    } 
    else if (this[newName] == false) 
    { 
     console.log("we should be turning it true now"); 
     this[newName] = true; 
    } 
    console.log("the button " + newName + " is now " + this[newName]); 
} 

これはNEWNAMEは、二つのボタンを押す、またはボタンのいずれかが、私が期待したように機能しているときに実際にaTwoOnにアクセスできることにはなりません。私はそれが範囲になると何かを見逃しているが、何をする必要があるのか​​分からないように思える。

このnoobieに何か助けていただきありがとうございます。

私はそれが event.currentTarget.nameは undefinedであることが判明した場合、その後、 newNameは

var newName = "aundefinedOn";

に評価され、それはあるかもしれないラインで

var newName = "a" + event.currentTarget.name + "On";

を行うために何かを持って考えています

Answer 1

理由は、あなたのユースケースでは失敗するはずです。また、あなたのHTMLを見ずに言うのは少し難しいです。

addまたはremoveボタンのトグルを追跡する変数の状態を変更する代わりに、要素のクラスを変更することができます。

イベントを各ボタンに別々にバインドするのではなく、共通のクラスを持つことができ、イベントハンドラをクラスの要素にバインドすることができます。

JS

let toggleElems = document.querySelectorAll('.toggle'); 

toggleElems.forEach(function(elem) { 
    elem.addEventListener("click", highlightButton); 
}); 


function highlightButton(event) { 
    let elem = event.target; 
    console.log("You have selected a button " + event.currentTarget.name); 
    var newName = "a" + elem.name + "On"; 
    var isOn = elem.classList.contains('on'); 

    if (isOn) { 
    console.log("we should be turning it false now"); 
    elem.classList.remove('on'); 
    } else { 
    console.log("we should be turning it true now"); 
    elem.classList.add('on'); 
    } 
} 

HTML

<div class="toggle" name="one"> 
    toggle 1 
</div> 
<div class="toggle" name="two"> 
    toggle 2 
</div> 
<div class="toggle" name="three"> 
    toggle 3 
</div> 
<div class="toggle" name="four"> 
    toggle 4 
</div> 
<div class="toggle" name="five"> 
    toggle 5 
</div> 

Check Fiddle

そして、あなたが完了打ったとき強調表示されているすべての要素を検索し、それを先頭にしますボタンを押すだけでyを再びアクティブなクラスと置き換えます。

var highlightedElements = document.querySelectorAll('.toggle.on');