Question

我正在尝试根据单击列表中的图像来制作更改的图像。

唯一的麻烦是，列表中的图像将其网址嵌入到样式中作为背景图像。

如何将img src的url调用到新图像？

<ul id="swatchList_att1"><li class="Name AttributeSwatch In_stock colourSwatch" id="attributeSwatch_1" data-attname="att1" data-attvalue="Deep Blue (001)" data-atrsku="0012345" style="background-image: url(https://color.adobe.com/api/v2/themes/2022184.png);">

修改

哇，响应时间很长。

和

哇，我昨天说得非常糟糕。道歉。

“swatchList_att1”列表是一组颜色样本，它们缩小到jpeg大小的50％。

我要做的就是创建一种“预览”图像，该图像位于不同的div中，并以膨胀的大小（110％）显示所选的颜色样本。在页面加载时，它将是列表中的第一种颜色。当在颜色样本组中的颜色上发生单击时，“预览”图像将更改为单击的颜色。

我无法更改这些列表项的工作方式（即将其更改为“数据背景”），因为幕后功能会中断。令人讨厌的是，我对此无能为力。无论出于何种原因（我不知道），这些列表对象需要以“样式”定义其图像。但是，我可以在列表中添加一个onclick函数（如果我有一些东西可以将它应用于列表中的所有项目，这些项目都有很长的不同名称）。

因此，我需要从“样式”onclick中推断出网址，并将“预览”img src更改为该网址。

响应BearSkyView：

因为它是一个单独的图像，这不是我的意思。此外，我需要一些东西，它会对列表中的所有内容进行onclick。

回应某些事情：

这更接近于我想要完成的事情，但由于我无法改变这些列表对象的制作方式，这对我来说无法实现。

Answer 1

http://api.jquery.com/css/

$('#attributeSwatch_1').css("background-image", new src here);

编辑：你在找这样的东西吗？ http://jsfiddle.net/rsqtL805/

Answer 2

因为你还在使用data-attributes，为什么不把它放在一个？说data-background="URL"。

<img src="" id="myImageElement" alt="large image" />
<img src="path/to/image.jpg" data-background="path/to/image.jpg" onclick="setImg(this); return false;" alt="thumbnail" />

function setImg(obj){
    var img = obj.getAttribute('data-background');
    document.getElementById("myImageElement").attribute("src", img);
}

否则，您可以阅读背景图片属性并将其拆分为javascript以检索网址并按照您的喜好进行操作：

var img = this.style.backgroundImage;
    img = img.split("rl(")[1].split(")")[0];

以上将采用以下字符串：

url(path/to/image.jpg);

首先将其拆分为：

[0] => u
[1] => path/to/image.jpg)

然后我们将元素拆分为)处的第1位，并选择索引0处的余数。

[0] => path/to/image.jpg
[1] =>

你可以做到

document.getElementById("myImageElement").attribute("src", img);

将图像元素的src设置为刚刚检索到的源。

点击列表更改img src

2 个答案: