如何在使用javascript/jQuery的所有dom圖像的img src中交換一個術語？

Question

我需要將所有img src /products/210x110/foo-bar-foo-front.jpg換成/products/210x110/bar-foo-bar-angle.jpg &將它應用於dom中的每個圖像。

我當前的代碼工作，但是從第一個圖像中的DOM應用src網址到所有IMG SRC屬性：

我需要只需更換1個字...

//toggle image angles 
var img = $("div.product-image a img"); 
$('div#image-angle-switch').toggle(function() { 
    $(this).html('<span></span> Angle view ') 
    switch_to_low_fi(); 
}, function() { 
    $(this).html('<span></span> Front view') 
    img.attr("src", img.attr("src").replace("front", "angle")); 
}); 
$('div#image-angle-switch').click(function() { 
    img.attr("src", img.attr("src").replace("toggle")); 
}); 

我可以創建每個img src的數組，交換一個單詞並重新應用到每個img？

var tn_array = $("div.product-image a img").map(function() { 

    return $(this).attr("src"); 
}); 

for (var i=0; i<tn_array.length; i++) { 
    console.log(tn_array[i]); 
} 

得到我的數組，但我應該如何應用它？任何幫助非常感謝。

Answer 1

在每個圖像上循環並更改它的src。

$('#image-angle-switch').data("view", "front").click(function() { 
    var $this = $(this); 
    if ($this.data("view") == "front") { 
     $this.html('<span></span> Angle view ').data("view","angle"); 

     // this does the looping 
     $("div.product-image a img").attr("src",function (i, src) { 
      return src.replace("front", "angle"); 
     }); 
    } else { 
     $this.html('<span></span> Front view ').data("view", "front"); 

     // this does the looping 
     $("div.product-image a img").attr("src", function (i, src) { 
      return src.replace("angle", "front"); 
     }); 
    } 
}); 

還替換了舊的折舊切換方法。可以做成烘乾機雖然