如何使用数组值更新div的背景

Question

我在javascript和jquery中都很难更新div的背景。

html

<div id="images">
<img class="mypics" src="kitty.png" style="display:none"></div>
<img class="mypics" src="doggy.png" style="display:none"></div>
<img class="mypics" src="mouse.png" style="display:none"></div>
</div>

javascript/jquery

picArray = document.getElementsByClassName("mypics");
$('#images').css('background-image', 'url("' + picArray [0].src + '")');

Answer 1

尝试下面的语法

$('#images').css('background-image', 'url(' + picArray[0].src + ')');

Answer 2

是否要更改单个div background？ 使用querySelector

const picArray = document.querySelector(".mypics");
$(picArray).css('background-image', 'url("' + picArray [0].src + '")');

多div吗?

getElementsByClassName即HTMLCollection

const picArray = document.getElementsByClassName("mypics");
picArray.forEach(pic => {
$(pic).css('background-image', 'url("' + picArray [0].src + '")');
});

也可以使用#imageschildren

consr images = document.getElementById("images").children;
Array.from(images).forEach(pic => {
$(pic).css('background-image', 'url("' + picArray [0].src + '")');
});

注意:使用Array.from，因为children是array-like