Animer CC HTML5 en essayant de changer une variable globale en appelant une chaîne

Question

Je suis un codeur chevronné d'actionscript et je prends mes premiers coups de poignard à javascript. La plupart du temps, ce n'est pas trop compliqué, mais j'ai rencontré quelques problèmes car je crée un grand nombre de boutons qui ressemblent à des bascules. Voici le code jusqu'à présent (j'en ai enlevé un tas, mais il y en aura environ 20, pas seulement 5).

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]); 
} 

Cela ne donne pas lieu à newName pouvoir accéder réellement aTwoOn lorsque le bouton est enfoncé à deux, ou l'un des boutons qui fonctionnent comme je l'avais espéré. Je me dis que je manque juste quelque chose quand il s'agit de la portée, mais je n'arrive pas à comprendre ce qui doit être fait.

Merci pour toute l'aide que vous pouvez apporter à cette noobie.

Answer 1

Je pense qu'il a quelque chose à voir avec la ligne

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

si event.currentTarget.name se révèle être undefined, puis newName évaluera à

var newName = "aundefinedOn";

Et cela pourrait être la raison, il doit échouer pour votre cas d'utilisation. Aussi, c'est un peu difficile à dire sans regarder votre HTML.

Vous pouvez add ou remove la classe des éléments au lieu de modifier l'état de la variable qui conserve la trace si le bouton est basculé ou non. De même, au lieu de lier séparément les événements à chaque bouton, vous pouvez avoir une classe commune et lier le gestionnaire d'événements aux éléments de la classe.

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

Et pour couronner le tout, pour trouver tous les éléments qui sont mises en évidence lorsque vous appuyez sur DONE bouton que vous pourriez juste demander y avec la classe active à nouveau.

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