Javascript 使用jQuery应用css值，但检查是否已指定该值

我使用jQuery将背景图像应用于随机选择的DIV元素

问题是，我想确保在任何给定的时间，没有两个DIV元素可以具有相同的背景图像。因此，当代码选择一个DIV来应用背景图像时，它还应该检查是否有任何DIV正在使用该图像

在搜索解决方案时，我在其他人的帮助下拼凑了一段代码，但它不会检查当时是否有任何div正在使用该图像。因此，经常发生两个或多个div同时具有相同的背景图像

这是我的密码：

var url=[
'网址(https://placekitten.com/g/350/150)',
'网址(https://placekitten.com/g/300/550)',
'网址(https://placekitten.com/g/400/200)',
'网址(https://placekitten.com/g/350/750)',
'网址(https://placekitten.com/g/250/600)',
'网址(https://placekitten.com/g/400/150)',
'网址(https://placekitten.com/g/300/600)',
'网址(https://placekitten.com/g/450/350)'
];
//选择下一个图像
var active=Math.floor（Math.random（）*（url.length-4））+1
setInterval（函数（）{
//随机选择要更改的下一个div
var rand=Math.floor（Math.random（）*4）；
//存储此列表，以便我们只对页面进行一次调用
让图像=$（'.image'）；
让datachanged=images.attr（“数据更改”）；
while（rand==datachanged）
rand=Math.floor（Math.random（）*4）；
让current=$（'.image:n第n个子（'+（rand+1）+'）；
当前.toggleClass（“显示隐藏”）；
//淡入效果需要400毫秒
setTimeout（函数（）{
current.css（'background-image'，url[active]）；
图像[0].setAttribute（“数据已更改”，rand）；
当前.toggleClass（“隐藏显示”）；
},400);
//更改活动值，以便下次背景不相同
active++；
活动=（活动==URL.length）？0:活动；
}, 2000);
body{margin:0；字体大小：0；}
.形象{
背景尺寸：封面；
显示：内联块；
宽度：23%；
垫面：23%；
利润率：1%；
过渡：不透明度0.4s；
}
。图像：第n个类型（1）{
背景图片：url(https://placekitten.com/g/350/150); 
}
。图像：第n个类型（2）{
背景图片：url(https://placekitten.com/g/300/550); 
}
.图像：第n个类型（3）{
背景图片：url(https://placekitten.com/g/400/200); 
}
。图像：第n个类型（4）{
背景图片：url(https://placekitten.com/g/350/750); 
}
.表演{
不透明度：1；
}
.隐藏{
不透明度：0；
}
我没有将“上次活动的img索引”保存为数据属性，而是创建了一个
selectedImages
，它保存以divs显示的图像状态：initial is[1,2,3,4]

在查找下一个唯一的随机数时，我只需执行do while look，直到得到不在
selectedImages
中的值：

do{
      active = Math.floor(Math.random() * (urls.length - 2)) + 1
    } while(selectedImages.indexOf(active) != -1)

下面是完整的片段


var url=[
'网址(https://placekitten.com/g/350/150)',
'网址(https://placekitten.com/g/300/550)',
'网址(https://placekitten.com/g/400/200)',
'网址(https://placekitten.com/g/350/750)',
'网址(https://placekitten.com/g/250/600)',
'网址(https://placekitten.com/g/400/150)',
'网址(https://placekitten.com/g/300/600)',
'网址(https://placekitten.com/g/450/350)'
];
//选择下一个图像
var selectedImages=[1,2,3,4]//divs img URL的初始状态
var lastSelectedDiv=-1；//最后选择的div的初始状态
setInterval（函数（）{
var活跃；
做{
active=Math.floor（Math.random（）*（url.length-2））+1
}while（selectedImages.indexOf（active）！=-1）//获取唯一的图像（不在当前显示的图像中）
//随机选择要更改的下一个div，该div与上次选择的div不同
var rand；
做{
rand=Math.floor（Math.random（）*4）；//获取一个随机值，直到它与lastSelectedDiv不同为止
}while（rand==lastSelectedDiv）
选择图像[rand]=活动；
lastSelectedDiv=rand；//将lastSelectedDiv重写为新的随机值，以便下次它必须不同
让current=$（'.image:n第n个子（'+（rand+1）+'）；
当前.toggleClass（“显示隐藏”）；
//淡入效果需要400毫秒
setTimeout（函数（）{
current.css（'background-image'，url[active]）；
当前.toggleClass（“隐藏显示”）；
},400);
}, 2000);
body{margin:0；字体大小：0；}
.形象{
背景尺寸：封面；
显示：内联块；
宽度：23%；
垫面：23%；
利润率：1%；
过渡：不透明度0.4s；
}
。图像：第n个类型（1）{
背景图片：url(https://placekitten.com/g/350/150); 
}
。图像：第n个类型（2）{
背景图片：url(https://placekitten.com/g/300/550); 
}
.图像：第n个类型（3）{
背景图片：url(https://placekitten.com/g/400/200); 
}
。图像：第n个类型（4）{
背景图片：url(https://placekitten.com/g/350/750); 
}
.表演{
不透明度：1；
}
.隐藏{
不透明度：0；
}
您可以使用数据存储所用图像的索引。然后在每个间隔中，您可以从主URL数组中排除曾经使用过的URL。然后选择一个随机索引来存储元素数据

另外，我将类切换更改为jQuery
.fadeIn（）
和
.fadeOut（）
，以提供更稳定的回调方法

确保图像URL的数组大于您拥有的div


让URL=[
'https://source.unsplash.com/5E5N49RWtbA/300x300',
'https://so