jquery替換圖像的響應式佈局

Question

在我的HTML頁面中，我有3個圖像適合每個尺寸，以匹配響應式佈局。點擊我怎麼可以替換img中的名字？

例如：

<img class="img-1024" src="images/photo-holder.jpg" /> 
<img class="img-768" src="images/768/photo-holder.jpg" /> 
<img class="img-320" src="images/320/photo-holder.jpg" /> 

如何改變這個樣子？

<img class="img-1024" src="images/new-holder.jpg" /> 
<img class="img-768" src="images/768/new-holder.jpg" /> 
<img class="img-320" src="images/320/new-holder.jpg" /> 

任何最短的方法來做到這一點？

Answer 1

一個短選項使用attr方法。

$('img').attr('src', function(i, c) { 
    return c.replace('photo', 'new') 
}); 

或：

$('img').click(function() { 
    this.src = this.src.replace('photo', 'new') 
}) 

http://jsfiddle.net/hHSQe/

Answer 2

做到這一點的方法： -

$(document).on("click", "img", function(){ 
    $(this).attr("src", function(i,v) { 
     return v.replace("photo","new"); 
    }); 
});​​ 

參考LIVE DEMO