changeImage js 코드를 조정하는 데 도움이 필요합니다.

Question

저는 초급자입니다.이 코드를 정리하는 데 도움이 필요합니다. 그것은 changeImage 상황입니다. 실제 양식 확인란 대신 이미지가있는 확인란을 표시합니다. 따라서 사용자는 빈 확인란을 클릭하고 클릭하면 이미지가 확인 표시로 바뀝니다. 그리고 그들은 다시 클릭하여 선택을 취소 할 수 있습니다. 그것은 모두 작동하지만, 이것이 문제입니다.

확인란 이미지 중 하나를 클릭 한 후에 변경하려면 다른 확인란 이미지를 얻으려면 두 번 클릭해야합니다. 나는 그것이 한 번의 클릭으로 부드럽고 좋게하고 싶습니다. 그리고 나는 그것을 막고있는 것을 모릅니다. 다음은 내가 사용하는 코드 스 니펫입니다. -

var newsrc = "img/checked.gif"; 

function changeImage() { 
    if(newsrc == "img/checked.gif") { 
     document.images["challenge"].src = "img/checked.gif"; 
     document.images["challenge"].alt = "Completed"; 
     newsrc = "img/checkBox.gif"; 
    } else { 
     document.images["challenge"].src = "img/checkBox.gif"; 
     document.images["challenge"].alt = "Unfinished"; 
     newsrc = "img/checked.gif"; 
    } 
} 

function changeImage2() { 
    if(newsrc == "img/checked.gif") { 
     document.images["goal1"].src = "img/checked.gif"; 
     document.images["goal1"].alt = "Completed"; 
     newsrc = "img/checkBox.gif"; 
    } else { 
     document.images["goal1"].src = "img/checkBox.gif"; 
     document.images["goal1"].alt = "Unfinished"; 
     newsrc = "img/checked.gif"; 
    } 
} 

스크립트에는 총 6 개의 이미지가 있습니다. 나는 처음 두 가지를 보여주고있다. 당신이 줄 수있는 도움이 될 것입니다.

Answer 1

모든 기능은 동일한 newsrc 변수를 공유하고 어떤 변수를 클릭하면 다른 변수가 클릭되었다고 생각됩니다.

src를 토글하고 항목을 클릭 할 때 해당 함수를 호출하는 단일 함수를 작성하는 것이 좋습니다.

뭔가 같은 :

function toggleImage(clickedImage){ 
    var checkedSrc='img/checked.gif'; 
    var currentSrc=clickedImage.src; 
    if(currentSrc.indexOf(checkedSrc) == currentSrc.length-checkedSrc.length){ 
     clickedImage.src='img/checkBox.gif'; 
     clickedImage.alt='Unfinished'; 
    }else{ 
     clickedImage.src='img/checked.gif'; 
     clickedImage.alt='Complete'; 
    } 
} 

그리고 당신의 HTML에서

<img id="whatever_1" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" /> 
<img id="whatever_2" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" /> 
<img id="whatever_3" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />