点击列表更改 img src答案

【问题标题】：Change img src on click in list点击列表更改 img src
【发布时间】：2014-11-10 16:30:30
【问题描述】：

我正在尝试制作一个基于单击列表中的图像而改变的图像。

唯一的麻烦是，列表中的图像将它们的 url 作为背景图像嵌入到样式中。

如何将 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 中推断出 url，并将“预览”img src 更改为该 url。

回应 BearSkyView：

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

在这里回复某事：

这更符合我想要完成的目标，但由于我无法更改这些列表对象的制作方式，因此很遗憾这对我不起作用。

【问题讨论】：

或者不使用图片，只设置一个背景相同的div。
Setting background-image using jQuery CSS property的可能重复
“将img src的url调用到新图片”是什么意思？

标签： javascript jquery html css image

【解决方案1】：

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

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

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

【讨论】：

不应该是"url('" + new_src + "')"吗？
首先，要么在attributeSwatch_1 之后添加另一个'，要么删除第一个。其次，我认为问题是“如何将我的图像 URL 放入另一个元素中”，这并不足以解决这个问题。第三，@BartZalezski - 这是真的还是假的，这取决于 BearSkyView 的意思。如果他提取了 URL，则为 true，如果他只是从 li 复制原始源，则为 false。
查看我链接 Barth 的文档。正确的语法是 $('#attributeSwatch_1').css('background-image', 'url(something.edu/theimage.png)');

【解决方案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 以检索 URL 并根据需要进行处理：

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 设置为刚刚检索到的源。

【讨论】：