변경 이미지 onClick within DIV?

Question

왼쪽에있는 이미지를 클릭 할 수있는 곳으로 jsFiddle 설정이 있습니다. 이미지를 변경하면 이미지가 변경되지만 DIV를 전체 (확장자 1)로 클릭하면 이미지 아웃.

DIV (전체적으로)를 클릭하고 DIV 내에있는 이미지를 바꿀 수 있기를 원하며 이미지 만 클릭 할 수 있기를 원합니다.

당신은 내가 여기 무슨 뜻인지 볼 수 있습니다 http://jsfiddle.net/5PDV5/1/

여러분 모두 감사합니다! :)

Answer 1

당신이해야 할 일은 div의 클릭 핸들러 내부에서 이미지의 src를 변경하는 것입니다. 코드처럼 읽을 것, 그래서

jQuery('.expand-one').click(function(){ 
     jQuery('.content-one').slideToggle('fast'); 
     var img = $(this).find('img'), 
      src = img.attr("src") 
      alt = img.data("altsrc"); 
      img.attr("src",alt).data("altsrc",src); 
    }); 
    jQuery('.expand-one').toggle(function() { 
     jQuery('.content-one').slideDown('fast'); 
     }, function() { 
     jQuery('.content-one').slideUp('fast'); 
    }); 

또한보다 효율적인 방법은 클래스와 배경 이미지를 사용하는 것입니다 :

HTML

<div class="expand-one blue-icon"></div> 

CSS

.expand-one { margin-left: 5px } /* Margin of Icon Size */ 
.blue-icon { background-image: url('blue-icon.png'); } 
.green-icon { background-image: url('green-icon.png'); } 

JS

//This turns one off and the other on 
$(this).toggleClass('blue-icon green-icon');