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

Change showcase image source with jQuery only works in Chrome

本文关键字：适用于 Chrome 图像 jQuery 更改 showcase 使用      更新时间：2023-09-26

我犯了一个错误，在将我的网站上线之前，我只在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/

您的问题是，不同浏览器在返回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(["']？//匹配"或"(如果存在(。([^"']*(//匹配除"answers"之外的任何字符，并将它们保存在$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文档。

相关文章：