Question

我目前正在投资组合网站上工作，我必须在几行中插入一系列参考徽标，就像：

var fadedpath = "img/logo section/final/faded/";
var colorpath = "img/logo section/final/color/";
$(".reference").hover(function(){
    $(this).attr(colorpath, filename);
}, function(){
    $(this).attr(fadedpath, filename);
});

但是当我将鼠标悬停在徽标上时，我想改变文件路径，就像这样：

{{1}}

这样做的正确语法是什么？因为谈论多个文件，在css中逐个更改它无效。

Answer 1

只需使用replace对象中的string原型方法。因此，您需要更改代码，如：

REV 1：

ADD $(this).find('img')：抱歉，我错过了阅读您的HTML格式

var fadedpath = "/faded/";
var colorpath = "/color/";
var oldPath = '';

$(".reference").hover(function() {
    oldPath = $(this).find('img').attr('src');
    $(this).find('img').attr(src, oldPath.replace(fadedpath, colorpath));

}, function() {
    oldPath = $(this).find('img').attr('src');
    $(this).find('img').attr(src, oldPath.replace(colorpath, fadedpath));
});

Answer 2

您的代码几乎正确，但attr()的用户不正确。您需要使用getter来检索当前src，然后replace()值。您还需要更改.reference内图片上的属性，而不是.reference元素本身。试试这个：

var fadedpath = "img/logo section/final/faded/";
var colorpath = "img/logo section/final/color/";

$(".reference").hover(function(){
    $(this).find('img').attr('src', function(i, src) {
        return src.replace(fadedpath, colorpath);
    });
}, function(){
    $(this).find('img').attr('src', function(i, src) {
        return src.replace(colorpath, fadedpath);
    });
});

另请注意，您不应在URL中使用的文件夹名称中添加空格。

更改图像上的图像文件路径：悬停

2 个答案: