改變圖片點擊，保持圖像，並刪除如果其他圖像被點擊

Question

爲交互式圖片我希望圖像改變懸停和保持懸停狀態，如果點擊（見圖片：http://labs.tageswoche.ch/grafik_osze）。對於懸停我有這樣的代碼：

var sourceSwap = function() { 
     var $this = $(this); 
     var newSource = $this.data('alt-src'); 
     $this.data('alt-src', $this.attr('src')); 
     $this.attr('src', newSource); 
    } 

    $(function() { 
     $('img[data-alt-src]').each(function() { 
      new Image().src = $(this).data('alt-src'); 
     }).hover(sourceSwap, sourceSwap); 
    }); 

但我不知道如何adpat此代碼，它的工作還點擊。如果點擊另一張圖像，應再次顯示原始圖像（白色圖像）。所以只有一個點擊圖片是黑色的。謝謝你的回答！

Answer 1

var sourceSwap = function() { 
     var $this = $(this); 
     if (!$this.hasClass('active')) { 
     var newSource = $this.data('alt-src'); 
     $this.data('alt-src', $this.attr('src')); 
     $this.attr('src', newSource); 
     } 
    } 

var makeActive = function() { 
    var $this = $(this); 

    // bring the active back (if any) to the first state 
    if($('img.active').length) { 
     var newSource = $('img.active').data('alt-src'); 
     $('img.active').data('alt-src', $('img.active').attr('src')); 
     $('img.active').attr('src', newSource); 

     $('img.active').removeClass('active'); 
    } 

    $this.toggleClass('active'); 
} 


$(function() { 
    $('img[data-alt-src]').each(function() { 
    new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 

    $('img[data-alt-src]').on('click', makeActive); 
}); 

以及我還沒有測試，但我希望你有一點