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

当我点击更改'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">

如何使'替换方法'找到＆amp;例如，覆盖旧路径而不更改文件名'icon-1.png'，因为它是动态图标。

提前致谢。

Answer 1

名称是否始终相同？在这种情况下，您可以使用以下代码

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

Answer 2

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

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

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

Answer 3

首先从源代码中获取文件名，然后重写整个源代码。假设您将“主题”发送到changeTheme函数，可以使用以下值：“images / icons”，“images / icons / blue”，“images / icons / red”等等，这样就可以了。

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

找到＆amp;替换'src'属性的部分文件路径

3 个答案: