的jQuery替換字符串的URL圖像

Question

請幫我 如何從S120

替換字符串URL圖像

S120 /demo%2Bproduct%2Blipstik.jpg

到

S400 /演示％2Bproduct％2Blipstik.jpg

//jQuery 
$(document).ready(function(){ 
    $("#largeimage").click(function(){ 
     $(".container img").attr("src").replace("s120","s400"); 
    }); 
}); 

html

<div class="container center"> 
    <img src="https://2.bp.blogspot.com/-NwKHFcL48ZA/WJ2FANm2TXI/AAAAAAAAA6Y/hE-85KroGacBYy26mnEbkEGYFcnyWWv4gCLcB/s120/demo%2Bproduct%2Blipstik.jpg"> 
</div> 
<p> 
<button class="center" id="largeimage">Large Image to 400</button> 
</p> 

DEMO

Answer 1

你沒有更新的屬性，用做與持有舊值作爲第二個參數attr()方法回調它。

$(document).ready(function() { 
    $("#largeimage").click(function() { 
    $(".container img").attr("src", function(i, src) { 
     return src.replace("s120", "s400"); 
    }); 
    }); 
}); 

Answer 2

另一種方法 - 改變attr函數內部img SRC。

$(document).ready(function(){ 
 
    $("#largeimage").click(function(){ 
 
    var src = $(".container img").attr("src"); 
 
    $(".container img").attr("src", src.replace("s120","s400")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container center"> 
 
    <img src="https://2.bp.blogspot.com/-NwKHFcL48ZA/WJ2FANm2TXI/AAAAAAAAA6Y/hE-85KroGacBYy26mnEbkEGYFcnyWWv4gCLcB/s120/demo%2Bproduct%2Blipstik.jpg"> 
 
</div> 
 
<p> 
 
<button class="center" id="largeimage">Large Image to 400</button> 
 
</p>