javascript - 使用数组的值更改 div 的背景 url

Question

大家好，很抱歉提出这个问题，但过去一小时我一直在更改网址、“”(那些东西)、''(和那些)。

我正在尝试更改 div 的背景 url。我知道以前已经有人问过这个问题，但是没有关于使用带有图像链接的数组的答案。相反，这个人将链接放在函数的括号中，我认为这是非常令人讨厌的代码。

这就是我正在尝试的:

HTML

<div id="display"></div>
<a href="#" onClick="changeimg(0, event)"><img alt="img" src="img/option/img1"></a>
<a href="#" onClick="changeimg(1, event)"><img alt="img" src="img/option/img2"></a>

CSS

#display{
    width: 750px;
    height: 500px;
    overflow: hidden;
    background:url(../img/img1.JPG);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

JS

var display = document.getElementById('display');

var imgs = [
    'img/img1.JPG',
    'img/img2.JPG'
];

function changeimg(x, e) {
    var i = x;

    display.style.backgroundImage = "url(imgs[i])";
    e.preventDefault();
}

当我这样做时，我在控制台中收到一条 ERR_FILE_NOT_FOUND 消息。 当我复制 url 中数组的链接之一时，例如:

display.style.backgroundImage = "url(img/img2.JPG)";

它将图像更改为链接的图像。那么如何让索引发挥作用呢？

(请注意，我使用单独的图像在“显示”和选项中显示。我这样做是为了网站不必加载 20 个巨大图像，但 1)

感谢您的帮助!

Answer 1

尝试使用 ES6 模板文字。对于您的问题，请将您的代码替换为以下代码。

display.style.backgroundImage =url(${imgs[i]});