javascript changer les couleurs conditionnellement

Question

Disons que vous avez trois éléments, tout blanc ou aucune couleur appliquée du tout. Si un élément est cliqué/sélectionné, il devient rouge. Si deux éléments ont été cliqués/sélectionnés, ils sont en rouge & vert. Si les trois éléments sont cliqués/sélectionnés, ils sont rouges, verts et bleus. Maintenant, quand un élément est cliqué une deuxième fois, il redeviendra blanc, mais peu importe ce dont il a encore besoin pour suivre ces règles.

1 élément = rouge

2 élément = rouge, vert

3 élément = rouge, vert, bleu

Avec l'aide je l'ai à ce jour est venu avec ce code, mais ne peut pas comprendre comment faire réagir l'événement en fonction des conditions requises. Par exemple, si tous les trois sont cliqués et nous cliquons pour enlever la couleur verte, alors le bleu devra être vert. jsFiddle with classes example

css

.container { 
background-color: #ffffff; 
border: 1px solid blue; 
border-radius: 10px; 
width: 100px; 
height: 50px; 
} 
.red { background-color: #ff0000; } 
.green { background-color: #00ff00; } 
.blue { background-color: #0000ff; } 

éléments

<div class='container' id='1' style='margin: 150px 0 0 75px; float: left;'></div> 
<div class='container' id='2' style='margin: 150px 0 0 175px; float: left;'></div> 
<div class='container' id='3' style='margin: 150px 0 0 220px; float: left;'></div> 

Javascript

window.onload=function() { 
     // set color classes into an array 
     var classes = ["red", "green", "blue"]; 
     var nextClass = 0; 
     var element = document.querySelectorAll(".container"); 

     // loop through container class elements one at a time onclick run changeClass 
     for (var i = 0; i < element.length; i++) 
     { 
      element[i].addEventListener("click", changeClass); 
     } 

     function changeClass (eventListener) 
     { 
     var element = eventListener.currentTarget; 
     var currentClass = hasClass(element, classes); 

       if (currentClass) 
       { 
        element.classList.remove(currentClass) 
       } 
       else 
       { 
        element.classList.add(classes[nextClass]); 
        nextClass = (nextClass + 1) % classes.length; 
       } 

     }//end function 

     function hasClass(element, classes) 
     { 
      // loop through classes array 
      for (var i = 0; i < classes.length; i++) 
      { 
       // onclick if all classes applied return currentClass 
       if (element.classList.contains(classes[i])) 
       { 
        return classes[i]; 
       } 
      } 

     }// end function 

}//end onload 

Est-il possible de charger ces classes en fonction des conditions requises?

Pourrait également charger les couleurs en ligne en utilisant element.style.backgroundColor, mais ne m'aide toujours pas. La dernière personne qui m'a aidé était très talentueuse et j'espère avoir la même aide:) ... J'ai beaucoup appris jusqu'à présent, mais je suis toujours coincé, mais je ne peux pas tout faire correctement.

Voici le code que je suis venu avec: Voir en action My updated code jsFiddle

window.onload=function() { 
     var classes = ["red", "green", "blue"]; 
     var nextClass = 0; 
     var element = document.querySelectorAll(".container"); 

     for (var i = 0; i < element.length; i++) 
     { 
      element[i].addEventListener("click", changeClass); 
     } 

     function changeClass (eventListener) 
     { 
     var elementG = document.querySelector('.green'); 
     var elementB = document.querySelector('.blue'); 
     var elementR = document.querySelector('.red'); 
     var element = eventListener.currentTarget; 
     var currentClass = hasClass(element, classes); 
     var red = removeRed(element, classes); 
     var green = removeGreen(element, classes); 

     if (currentClass) 
     { 
      element.classList.remove(currentClass) 
      nextClass--; 
      if (nextClass < 0) 
      { 
       nextClass += classes.length; 
      } 
     } 
     else 
     { 
      element.classList.add(classes[nextClass]); 
      nextClass = (nextClass + 1) % classes.length; 
     } 

     if (red && elementB != null) 
     { 
      elementB.classList.add('red'); 
      elementB.classList.remove('blue'); 
     } 
     else if (red && elementB == null && elementG != null) 
     { 
      elementG.classList.add('red'); 
      elementG.classList.remove('green') 
     } 
     if (green && elementB != null) 
     { 
      elementB.classList.add('green'); 
      elementB.classList.remove('blue'); 
     }    

     }//end function 

     function hasClass(element, classes) 
     { 
      // loop through classes array 
      for (var i = 0; i < classes.length; i++) 
      { 
       // if all three classes 
       if (element.classList.contains(classes[i])) 
       { 
        return classes[i]; 
       } 
      } 

     }// end function 

     function removeRed(element, classes) 
     { 
      if (element.classList.contains(classes[0])) 
      { 
       return classes[0]; 
      } 
     }// end function 
     function removeGreen(element, classes) 
     { 
      if (element.classList.contains(classes[1])) 
      { 
       return classes[1] 
      } 
     } 
}//end onload 

Answer 1

Je pense que vous devez aussi garder une trace de l'ordre des éléments ont été cliqués. Je vous suggère de le faire en gardant un objet qui agira comme une sorte de paire clé/valeur, où la clé est l'identifiant de l'élément cliquant/décocher, et la valeur est le nombre sur lequel il a été cliqué (1 = rouge, 2 = vert, etc.). Puis, dans changeClass(), lorsque vous ajoutez la classe, vous pouvez également ajouter à l'objet le numéro sur lequel il a été cliqué. Lorsque vous supprimez la classe, vous pouvez désactiver la clé dans l'objet et parcourir les éléments de l'objet et décrémenter tout élément ayant une valeur plus élevée. Ce décrément vous permettra d'ajuster la couleur/le nombre de tout ce qui a été cliqué après ce bouton qui était juste "décoché" (par exemple un bouton bleu devrait devenir vert si vous "décocher" le bouton vert).

pourrait ressembler à ceci:

Initialiser avec ceci:

var state = {}; 

Faites ceci en cliquant (avant d'incrémenter nextclass):

state[element.id] = nextClass; 

Est-ce que quand décliquetage:

var removedNum = state[element.id]; 
delete state[element.id]; 
nextClass--; 
if (nextClass < 0) { nextClass += classes.length; } 
var i; 
var keys = Object.keys(state); 
for (i = 0; i < keys.length; i++) { 
    if (state[keys[i]] >= removedNum) { 
     // decrement only things after the button unclicked 
     var checkElement = document.getElementById(keys[i]); 
     state[keys[i]]--; 
     var checkClass = hasClass(checkElement, classes); 
     if (checkClass) { 
      // remove its existing class 
      checkElement.classList.remove(checkClass); 
     } 
     // add the one it should now have 
     checkElement.classList.add(classes[state[keys[i]]]); 
    } 
}