첫 번째 클릭 후 앞뒤로 이미지 변경 src

Question

내가 원하는 일은 ... 이미지 'x'를 클릭하면 다시 클릭 할 때 이미지가 변경되기를 원한다. 그래서 네 번째, 그러나 나는 단지 이것이 두 번째 클릭에서 발생하기를 원합니다. 그것을 클릭하면

그래서 X를 클릭 & 아무것도 난 후, 페이지를 재설정 할 때까지 , 다시 다시 다시 클릭 한 후 이미지, 다음 및 변경 한 다음 앞뒤로 그 후 번갈아 그런
을 발생하지 리셋을 원하십시오. 당신이 함수 내부의 var에 ClickedOnce을 선언하고 있기 때문에

document.getElementById('x').onclick = function() { 
    var ClickedOnce = 0; 
    if (this.src == 'Media/Images/Other/SwitchUP.jpg') { 
    ClickedOnce + 1 
} 
if (this.src == 'Media/Images/Other/SwitchUP.jpg' && ClickedOnce > 1) { 
    this.src = 'Media/Images/Other/SwitchDOWN.jpg'; 
} else if ('Media/Images/Other/SwitchDOWN.jpg') { 
    this.src = 'Media/Images/Other/SwitchUP.jpg'; 
} 
} 

Answer 1

그것은이 작동하지 않는 이유처럼 보인다는 다음과 같습니다

이 지금까지 내 코드입니다. 즉, 함수가 호출 될 때마다 0으로 설정되는 해당 함수 내부의 지역 변수입니다. 따라서 클릭 할 때마다 동일한 문제가 발생합니다.

함수 외부에서 일부 변수를 선언 해보십시오.

당신은이 같은 시도 할 수 있습니다 : 당신이 jQuery로이 질문에 태그 이후,

var wasClicked = false; 

document.getElementById('x').onclick = function() { 
    if (!wasClicked) { 
     wasClicked = true; 
     return; 
    } 
    if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') { 
     this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg'); 
    } else { 
     this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg'); 
    } 
} 

추가를, 여기에 jQuery를 접근 방식이다

이

var wasClicked = false; 

$(document).ready(function() { 
    $("#x").click(function() { 
     if (!wasClicked) { 
      wasClicked = true; 
      return; 
     } 
     if ($(this).attr("src") == "path/to/some/image") { 
      $(this).attr("src", "path/to/other/image"); 
     } else { 
      $(this).attr("src", "path/to/some/image"); 
     } 
    }); 
});