使用 jQuery 更改展示图像源仅适用于 Chrome

Question

我犯了一个错误，就是在上线之前只在 Chrome 中测试我的网站，现在我正在迅速尝试修补一些使用 Firefox 和 IE 的人报告的错误。

在有问题的网页上，四处散落着带有 block 类的图像，中间是带有 id currentImg 的介绍性默认图像。当用户点击一个区块时，currentImg 的src 属性会更改为所选区块的属性，从而显示点击图片的放大版本。

$('.block').click(function(){
    var id = this.id; //Gets clicked block id
    var src = ($(this).css('background-image')); //Gets block image source
    src = src.replace('url(','').replace(')',''); //Formats file path
    //alert(src); //Source check (Always successful)

    $('#currentImg').attr('src', src); //I think this is where the issue is
});

展示的图像永远不会改变默认值。当我实现淡入淡出过渡时，默认淡出并返回，而不是新图像。

JSFiddle：

http://jsfiddle.net/Noff/rqpu3d5b/6/embedded/result/

Answer 1

您的问题是不同浏览器之间在浏览器返回background-image 属性的方式上存在一些不一致。以下都是有效的url 声明。

1. url(image.png)
2. url('image.png')
3. url("image.png")

但是，不同的浏览器返回属性的方式不同，并且不一定与 CSS 中的写法相匹配。在您的情况下，Firefox 似乎正在返回带有引号的 url 函数，但 Chrome 不是。您提取 URL 的字符串替换不期望它们，因此它以 URL 周围的引号结束。

要解决这个问题，您需要更强大的字符串替换。正则表达式应该可以解决您的问题。

src = src.replace(/url\(["']?([^"']*)["']?\)/, "$1");

此正则表达式将从 url 声明中捕获图像 URL，处理 ' 或 " 字符（如果存在）。

这里是正则表达式部分的细分。

url\( //匹配url( ["']? //匹配 " 或 ' 如果存在。 ([^"']*) //匹配除 " 和 ' 以外的任何字符，并将它们保存在 $1 变量中。 ["']? //匹配 " 或 ' 如果存在。 \） //匹配 ）

最终解决方案。

$('.block').click(function(){
    var id = this.id; //Gets clicked block id
    var src = ($(this).css('background-image')); //Gets block image source
    src = src.replace(/url\(["']?([^"']*)["']?\)/, "$1"); //Formats file path

    $('#currentImg').attr('src', src); //I think this is where the issue is
});

注意：

如果您在外部 CSS 的 background-image 属性中使用相对 URL，请记住，内联样式将相对于 HTML 文档，而不是 CSS 文档。