查找并替换“src”属性的部分文件路径答案

【问题标题】：find & replace part of file path for 'src' attribute查找并替换“src”属性的部分文件路径
【发布时间】：2015-05-20 09:48:44
【问题描述】：

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

<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">

当我单击更改“once”的主题颜色时，下面的 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”，因为它是动态图标。

提前致谢。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您需要循环替换每个元素的src。

$('img').attr('src', function(i, src){
    return src.replace('images/icons', 'images/icons/blue')
});

当您使用.attr() 的getter 版本时，它将返回匹配元素集中第一个元素的属性值，因此将为所有元素设置相同的值。

【讨论】：

感谢您的支持！

【解决方案3】：

只需先从源中获取文件名，然后重写整个源。假设您将“主题”作为“主题”发送到 changeTheme 函数，来自以下值的内容：“图像/图标”、“图像/图标/蓝色”、“图像/图标/红色”等。这样就可以了。

function changeTheme(theme) {
 var img=$(img);
 var filename=img.attr('src').split('/');
 filename=filename[filename.length-1];
 img.attr('src',theme+"/"+filename);
}

或者，如果您不介意将文件名作为数据属性存储到图像中，您可以更改函数的第二行和第三行，如下所示：

var filename=img.data("filename"); //assuming you are storing the file name in data-filename attribute

【讨论】：

感谢您的支持！