2013-03-12 4 views
2

접을 수있는 트리보기를 만들고 있습니다. 나는 그것을 모두 만들었을 때마다 클릭 할 때마다 내 +- 아이콘이 토글되어야한다.두 개의 이미지를 전환하는 방법 onClick

나는 다음과 같은 코드를 사용하여 jQuery를 함께 클릭에 +에서 -에 아이콘을 변경할 때이 부분을했다 :

$(this).attr('src','../images/expand.gif'); 

문제는, 내가 다른 길을 갈 수 있도록하는 방법을 모른다 주위 때 다시 노드를 클릭 :

+0

가능한 중복 [jQuery를 토글 이미지를 변경 (http://stackoverflow.com/questions/1062731/jquery-toggle-to-change- : 당신의 클릭 이벤트 함수 내부, 당신이 뭔가를 할 수 있습니다 이미지) – EdChum

답변

6

이 작동합니다 :

<style> 
.expand{ 
    content:url("http://site.com/expand.gif"); 
} 
.collapse{ 
    content:url("http://site.com/collapse.gif"); 
} 
</style> 

<img class="expand"> 
<script> 
//onclick code 
$('img.expand').toggleClass('collapse'); 
</script> 
+0

로컬로 할 때이 부분을 수행하는 방법을 알려줄 수 있습니까? (CSS에는 URL이 없습니다) –

+0

url ('./ images/expand.gif'); – mkaatman

2

봐 JQuery와 기능 toggleClass에 대한 :)

http://jsfiddle.net/Ceptu/

HTML :

<div id="box"> 

    Hello :D 

</div> 

JQuery와 :

$("#box").click(function() { 
    $(this).toggleClass("red"); 
}); 

CSS는 :

#box { 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
} 

.red { 
    background-color: red !important; 
} 

는 기억 중요한 것은 정말 중요하다!! 이 작업을 수행하는 방법

많은 : D

+0

그래, 난 그냥 같은 예를보고있다 :) 감사합니다 –

+0

해피 내가 보여줄 수있는 그를 호출하기 전에 이미지를로드하는 25x25보다 큰 이미지와 함께 가장 좋은 방법을 도울 수 행복하지만 그 : : -1000 픽셀; – user666

0

추가를 더한 기본 IMG의 SRC로 다음 마이너스 이미지에 이미지 소스를 변경하는 마이너스 클래스를 정의

$("selector_for_your_link").click(function() { 
     $(this).toggleClass("minus-class"); 
    }); 
1

클래스를 만들지 않고 이것을하고 싶었습니다.

if($(this).attr('src') == '../images/collapse.gif') 
    $(this).attr('src', '../images/expand.gif'); 
else 
    $(this).attr('src', '../images/collapse.gif'); 
관련 문제