我目前正在做信用卡UI。我一直试图随机改变多个部门的背景图像(类名是相同的)。我的意图是在重新加载页面时为每个部门随机显示不同的图像，但我最终为所有目标部门提供相同的图像(尽管是随机的)。
非常感谢你的帮助。
当前代码如下(这里没有写样式)
<html>
<body>
<div class="card-inner"></div>
<div class="card-inner"></div>
<div class="card-inner"></div>
<script>
window.onload = function () {
var url = [];
url[0] = 'card-bg1.jpg';
url[1] = 'card-bg2.jpg';
url[2] = 'card-bg3.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.querySelectorAll('.card-inner');
for (let i = 0; i < elm.length; i++) {
elm[i].style.backgroundImage = 'url(../img/service/' + url[n] + ')';
}
}
</script>
</body>
</html>直接移动
var n = Math.floor(Math.random() * url.length);
在循环内像这样
for (let i = 0; i < elm.length; i++) {
var n = Math.floor(Math.random() * url.length);
elm[i].style.backgroundImage = 'url(../img/service/' + url[n] + ')';
}
如果你调用一次，你怎么能期望它会有所不同?
如果您希望它们是唯一的，您可以使用这样的代码，每次从url数组中删除所选元素
function () {
const urls = []
const elm = document.querySelectorAll('.card-inner');
for (let i = 0; i < elm.length; i++) {
if (!urls.length) {
urls.push('card-bg1.jpg', 'card-bg2.jpg', 'card-bg3.jpg');
}
const n = Math.floor(Math.random() * urls.length);
const url = urls.splice(n, 1).pop()
elm[i].style.backgroundImage = 'url(../img/service/' + url + ')';
}
}
PS var和let一起使用看起来很奇怪。如果使用let，则对不可更改的变量使用const