イメージを変更onClick within DIV？

Question

イメージを左にクリックできる場所にjsFiddleセットアップがあります。イメージを変更するとイメージが変更されますが、DIV全体をクリックすると（expand-one）スワップしませんイメージアウト。

私は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');