이미지를 다시 클릭하면 이미지가 어떻게 바뀌나요?

Question

나는 HTML5 & 자바 스크립트를 사용하여 5 개의 별점 등급 이미지를 개발했습니다. 2 개의 이미지가 있습니다 (greenstar & 레드 스타).

나는 웹 페이지에 5 개의 별개의 별 이미지를 표시했습니다. 특정 별 이미지 (3 번째 빨간색 별표)를 클릭하면 그 별 이미지 (1, 2, 3 번째 이미지)가 greenstar (4th & 5 번은 redstars)로 변경되어야합니다.

위의 예에서 별 이미지 (두 번째 : greenstar)를 클릭하면 클릭 한 모든 녹색이 켜질 때까지 별표가 표시됩니다 (3 일, 4 일, 5 일은 redstars 여야 함).

위의 사항이 정상적으로 작동합니다. 내가 필요한 것은 두 번째 별을 클릭했을 때 빨간색 (1 번째 + 2 번째 녹색), 3 번째 + 4 번째 + 5 번째 (red)가 빨간색에서 녹색으로 바뀌는 것입니다. & 두 번째 별을 다시 클릭하면 별이 모두 빨간색으로 변경됩니다.

function ChangeState (index, parent) { 
    var colStars = parent.getElementsByTagName ("img"); 
    for(var k=0;k <colStars.length;k++) { 
    colStars [k]. src = (k <index? "Images/greenstar.png": "Images/redstar.png"); } 
} 

여기서 "색인"은 어떤 별이 클릭되었는지를 나타냅니다.

Answer 1

인덱스가 동일하면 현재 누른 인덱스를 저장하고 새 인덱스와 일치시킬 수 있습니다. 다음과 같이 시도해보십시오.

var previndex = -1; 
function ChangeState (index, parent) { 
    var colStars = parent.getElementsByTagName ("img"); 
    if(previndex==index){ 
     previndex = -1; 
     index = -1; 
    }else{ 
     previndex = index; 
    } 
    for(var k=0;k <colStars.length;k++) { 
     colStars [k]. src = (k <index? "Images/greenstar.png": "Images/redstar.png"); 
    } 
}