javascript - 查找并替换 'src' 属性的部分文件路径

Question

假设我有一个主题切换器，并且有多个图像/图标

<img src="images/icons/icon-1.png">
<img src="images/icons/icon-2.png">
<img src="images/icons/icon-3.png">
<img src="images/icons/icon-4.png">

而且我还有另一组具有不同颜色/路径的图标

<img src="images/icons/blue/icon-1.png">
<img src="images/icons/blue/icon-2.png">
<img src="images/icons/blue/icon-3.png">
<img src="images/icons/blue/icon-4.png">

当我单击“一次”更改主题颜色时，下面的 jQuery 代码运行良好

$('img').attr('src', $('img').attr('src').replace('images/icons', 'images/icons/blue'));

如果我再次单击选择另一种颜色(例如“红色”)，路径就会变成这样

<img src="images/icons/red/blue/icon-1.png">

本来应该是这样的

<img src="images/icons/red/icon-1.png">

如何使用“替换方法”来查找并覆盖旧路径，而不更改文件名“icon-1.png”，例如，因为它是动态图标。

提前致谢。

Answer 1

名字总是一样吗？在这种情况下，您可以使用以下代码

$('img').attr('src', function(i, src){
    return 'images/icons/blue/' + src.split("/").pop()
});