자바 스크립트는 조건부로 색상을 변경합니다

Question

세 가지 요소가 있습니다. 모두 흰색이거나 전혀 색상이 적용되지 않습니다. 어떤 요소가 클릭/선택되면 빨간색으로 바뀌고, 두 요소가 클릭/선택되면 빨간색으로 나타납니다. & 녹색입니다. 세 요소가 모두 클릭/선택된 경우 빨강, 녹색, 파랑입니다. 이제 어떤 요소가 두 번 클릭되면 다시 흰색으로 바뀌지 만, 여전히 논문의 규칙을 따라야합니다.

한 요소 도움으로

파란색, 빨간색 = 빨간색

2 요소 = 녹색

3 요소 = 녹색, 빨간색, 지금까지이 코드를 내놓았다했지만 필요한 조건에 따라 이벤트를 반응시키는 방법을 알아낼 수 없습니다. 예를 들어 세 버튼을 모두 클릭하고 녹색을 클릭하여 제거하면 파란색이 녹색이어야합니다. 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; } 

요소

<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> 

자바 스크립트

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 

필요한 조건에 따라 이러한 클래스를로드하는 방법이 있나요?

element.style.backgroundColor을 사용하여 색상을 인라인으로로드 할 수 있지만 여전히 도움이되지 않습니다. 마지막으로 나에게 도움이 된 사람은 매우 재능이 있었고 나는 같은 도움이되기를 바라고 있습니다.) ... 지금까지 많이 배웠지 만 여전히 붙어 있었지만 가까스로 옳았습니다. 여기

내가 생각 해낸 코드입니다 : 액션 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

에서를 참조하십시오. 나는 당신이 키/값 쌍의 일종으로 행동 할 객체를 유지함으로써 제안 할 것이다. 키는 엘리먼트의 "id"가 클릭/언 크릭 (unclicking)되고, 값은 그것이 클릭 된 수 (즉, 1 = 적색, 2 = 녹색 등).

그런 다음 changeClass()에서 클래스를 추가 할 때 클릭 한 번호를 개체에 추가 할 수도 있습니다. 클래스를 제거 할 때 객체의 키를 설정 해제하고 객체의 항목을 반복하고 더 높은 값을 가진 객체를 감소시킬 수 있습니다. 이렇게 감소하면 해당 버튼 다음에 클릭하지 않은 항목 (예 : 클릭 취소) 만 조정할 수 있습니다 (예 : 녹색 버튼을 클릭 해제하면 파란색 버튼이 녹색으로 바뀝니다).unclicking 때

state[element.id] = nextClass; 

는이 작업을 수행 :이와

초기화 : (nextclass를 증가하기 전에) 클릭하면

var state = {}; 

는이 작업을 수행

는 다음과 같이 보일 수 있습니다

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