Javascript für Schleife mit verschachteltem if/else-Anweisung nicht ausgeführt, nicht sicher, was falsch gelaufen ist

Question

Ich arbeite an dieser kleinen Funktion für eine Hype-Web-Animation. Grundsätzlich habe ich zwischen 2 und 8 Menüeinträge, und wenn man darauf klickt, muss es etwas undurchsichtiger werden und der vorherige muss wieder undurchsichtig werden. Ich habe eine Variable, die auf die zuletzt angeklickte Element-ID gesetzt ist, und eine andere, die auf die Klasse von Elementen gesetzt ist, die die Menüelemente verwenden, getElementIdByClassName. Die for-Schleife iteriert über die ids in den Klassen, und ein if/else sagt "if colors [i] .id! = CurrentColor setze die Deckkraft auf 1; sonst setze die Deckkraft auf .3", oder zumindest denke ich, dass es das sagt. Kann mir jemand dabei helfen? Ich kann es nicht herausfinden.

Danke!

changeShoe(hypeDocument, element, event){ 
     var currentColor = element.id; 
     var colors = document.getElementsByClassName("colors").id; 

     for (i = 0, n = colors.length; i<n; i++) { 
       if(colors[i] !== currentColor){ 
        colors[i].style.opacity = 1; 
        } 
       else{ 
        colors[i].style.opacity = .3; 
        } 

      } 

    } 

Answer 1

Was ist falsch mit Ihrem Code und wie zu beheben.

changeShoe(hypeDocument, element/*, event*/){ //event is not used and can be removed from parameters 
    var currentColor = element.id;//This is good 
    //var colors = document.getElementsByClassName("colors").id; 
    //document.getElementsByClassName("colors") is a HTMLCollection and doesn't have **id** property 
    //it means colors is undefined 
    var colors = document.getElementsByClassName("colors");// this way 

    for (i = 0, n = colors.length; i<n; i++) {//good approach 
      //colors is now collection and colors[i] is HTML element. So .id 
      //if(colors[i].id !== currentColor){//this is OK IIF each element has unique ID 
      if(colors[i] !== element){//not exact match 
       colors[i].style.opacity = 1;//now it is correct 
       } 
      else{ 
       colors[i].style.opacity = .3; 
       } 
     } 
} 

Answer 2

document.getElementsByClassName("colors").id; 

Hat Sie nicht ein Array geben.

versuchen

changeShoe(hypeDocument, element, event){ 
    var currentColor = element.id; 
    var colors = document.getElementsByClassName("colors"); 

    for (i = 0, n = colors.length; i<n; i++) { 
      if(colors[i].id !== currentColor){ 
       colors[i].style.opacity = 1; 
       } 
      else{ 
       colors[i].style.opacity = .3; 
       } 
     } 
}