onclick使用jquery更改圖像源

Question

當我單擊圖像時，它會更改爲備用版本（data-other-src）。

當我點擊一個圖像，我也想重置所有其他圖像到他們的src。我怎樣才能做到這一點？

這裏是我到目前爲止的代碼：

<script> 
$(".imageOnOff").live('click', function() { 
$(this).attr({src: $(this).attr('data-other-src'),'data-other-src': $(this).attr('src') 
}) 
    }); 
</script> 

<img class="imageOnOff" data-other-src="images/color/1.png" src="images/color/1-1.png"  width="16" height="16"> 
<img class="imageOnOff" data-other-src="images/color/2-2.png" src="images/color/2.png" width="16" height="16"> 
<img class="imageOnOff" data-other-src="images/color/3-3.png" src="images/color/3.png" width="16" height="16"> 
<img class="imageOnOff" data-other-src="images/color/4-4.png" src="images/color/4.png" width="16" height="16"></a> 

Answer 1

變化的數據，其他-SRC爲src相反的，你應該存儲原始源：

$(".imageOnOff").live('click', function() { 
    $(".imageOnOff[original-src]").each(function(){ 
     this.src = $(this).attr('original-src'); 
     $(this).removeAttr('original-src'); 
    }); 
    $(this).attr('original-src', this.src); 
    this.src = $(this).data('other-src'); 
})​ 

Demonstration