이미지 토글 버튼은 한 번만 작동합니다.

Question

토글하려는 이미지 버튼이 있습니다. 그러나 새로 고침을 한 번만 토글합니다. 이미지를 클릭하면 두 번째 그림으로 바뀌고 다음 번 클릭하면 원래 그림으로 다시 변경됩니다. 이 코드를 통해 첫 번째 사진부터 두 번째 사진을 얻을 수 있지만 다시 클릭하면 원본 사진을 다시 가져올 수 없습니다. 누군가 내가 잘못 가고있는 것을 지적 할 수 있습니까?

:

<a href='#'> 
     <input type="image" src="/images/pulpit.jpg" id="btn-true" /> 
</a> 


<script type="text/javascript"> 
      $('#btn-true').click(function() { 
       if ($(this).prop("src", "/images/pulpit.jpg")) 
        $(this).prop("src", "smiley.gif"); 
       else if ($(this).prop("src", "smiley.gif")) 
        $(this).prop("src", "/images/pulpit.jpg"); 
      }); 
     </script> 

Answer 1

귀하의 조건문

당신은 실제로 라인을 변경, 수표의 소스를 지정하고, 약간 잘못 - 이것은 내가

HTML & jQuery를 사용하고있는 전체 스크립트입니다

if ($(this).prop("src", "/images/pulpit.jpg")) 
else if ($(this).prop("src", "smiley.gif")) 

사람 : 모든

if ($(this).prop("src") == "/images/pulpit.jpg") 
else if ($(this).prop("src") == "smiley.gif") 

Answer 2

먼저하여야한다 속성에 대해 .attr(),에 대해 .prop(), 속성에 대해을 사용하십시오. 그런 다음 출력을 비교하고 현재 시도한대로 설정하지 않아야합니다. 다음을 확인하십시오 :

$('#btn-true').click(function() { 
       if ($(this).attr("src") == "/images/pulpit.jpg") { 
        $(this).attr("src", "smiley.gif"); 
       } else if ($(this).attr("src") == "smiley.gif") { 
        $(this).attr("src", "/images/pulpit.jpg"); 
       } 
      }); 

Answer 3

이미지 URL을 확인하고 변경하는 대신 CSS 클래스를 처리해야합니다. 예를 들어 이미지를 클릭하면이 이미지가 전환되는지 여부를 확인합니다.

if ($(this).hasClass("toggle")) 
    $(this).removeClass("toggle"); 
else 
    $(this).addClass("toggle"); 

그런 다음 CSS에 이미지 경로를 지정하십시오.

img { background-image:url(/images/pulpit.jpg); } 
img.toggle { background-image:url(smiley.gif); } 

편집 :

당신의 내용을 대체 자바 스크립트 기능

$(this).toggleClass('toggle'); 

에 의해 결과는 정확히 동일하지만 @Eric에 의해 했나요로는를 사용하는 것이 훨씬 낫다 toggleClass() 방법.

이미지를 클릭 할 때마다 "토글"CSS 클래스가 추가되지 않았 으면 추가되고, 그렇지 않으면 삭제됩니다.

그런 다음 CSS에서 관리 할 수 ​​있습니다 (위에서 설명한 두 개의 CSS 클래스를 추가하여 다른 이미지를 표시 할 수 있음).