使用jQuery应用CSS值，但检查是否已指定 [英] Apply a css-value with jQuery but check if it is specified already
问题描述
我正在使用jQuery将背景图像应用于随机选择的DIV元素.
I am using jQuery to apply background-images to randomly selected DIV elements.
问题是我想确保在任何给定时间没有两个DIV元素可以具有相同的背景图像.因此，当代码选择DIV来应用背景图像时，它还应该检查在那个时刻是否有任何DIV已经在使用该图像.
The problem is that I want to make sure that no two DIV elements can have the same background-image at any given time. So when the code chooses a DIV to apply the background-image, it should also check if any of the DIVs are already using that image in that moment.
在寻找解决方案时，我在他人的帮助下整理了一段代码，但是它不检查当时是否有任何DIV已经在使用该图像.结果，经常会发生两个或多个DIV同时具有相同的背景图像的情况.
I have put together a piece of code with a lot of help from others while searching for a solution, but it does not check if any of the DIVs are already using that image in that moment. As a result it often happens that two or more DIVs have the same background-image at the same time...
这是我的代码:
var urls = [
'url(https://placekitten.com/g/350/150)',
'url(https://placekitten.com/g/300/550)',
'url(https://placekitten.com/g/400/200)',
'url(https://placekitten.com/g/350/750)',
'url(https://placekitten.com/g/250/600)',
'url(https://placekitten.com/g/400/150)',
'url(https://placekitten.com/g/300/600)',
'url(https://placekitten.com/g/450/350)'
];
// Select the next image
var active = Math.floor(Math.random() * (urls.length - 4)) + 1
setInterval(function() {
// Select randomnly the next div to change
var rand = Math.floor(Math.random() * 4);
// Store this list, so that we only make one call to the page
let images = $('.image');
let datachanged = images.attr("data-changed");
while(rand == datachanged)
rand = Math.floor(Math.random() * 4);
let current = $('.image:nth-child('+(rand+1)+')');
current.toggleClass("show hide");
// The fade effect takes 400ms
setTimeout(function(){
current.css('background-image', urls[active]);
images[0].setAttribute("data-changed", rand);
current.toggleClass("hide show");
},400);
// Change active value so that the background will not be same next time
active++;
active = (active == urls.length) ? 0 : active ;
}, 2000);
body { margin: 0; font-size: 0;}
.image {
background-size: cover;
display: inline-block;
width: 23%;
padding-top: 23%;
margin: 1%;
transition: opacity 0.4s ease;
}
.image:nth-of-type(1) {
background-image: url(https://placekitten.com/g/350/150);
}
.image:nth-of-type(2) {
background-image: url(https://placekitten.com/g/300/550);
}
.image:nth-of-type(3) {
background-image: url(https://placekitten.com/g/400/200);
}
.image:nth-of-type(4) {
background-image: url(https://placekitten.com/g/350/750);
}
.show {
opacity: 1;
}
.hide {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="images">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
推荐答案
您可以使用数据存储所用图像的索引.然后，您可以在每个间隔中从主网址数组中排除一次使用过的内容.然后选择一个随机索引存储在元素数据中.
You can use data to store the index of the image used. Then in each interval you can exclude the once used from the main urls array. Then choose a random index to store in element data.
此外，我将类切换更改为jQuery .fadeIn()和.fadeOut()，以提供更稳定的回调方法.
Also, I changed the class toggle to jQuery .fadeIn() and .fadeOut() as the provide more stable approach with callbacks.
请确保图片网址的数组大于您拥有的div.
Make sure that the array of the images urls is more than the divs that you have.
let urls = [
'https://source.unsplash.com/5E5N49RWtbA/300x300',
'https://source.unsplash.com/G85VuTpw6jg/300x300',
'https://source.unsplash.com/fIq0tET6llw/300x300',
'https://source.unsplash.com/P_0R02ArdLE/300x300',
'https://source.unsplash.com/PC_lbSSxCZE/300x300',
'https://source.unsplash.com/nptLmg6jqDo/300x300',
'https://source.unsplash.com/1_CMoFsPfso/300x300',
'https://source.unsplash.com/mk7D-4UCfmg/300x300'
];
// Get reference to divs and assign images on inital load
let images = $('.image');
let unusedDivs;
images.each(function(i, e) {
jQuery(this).css('background-image', `url(${urls[i]})`);
jQuery(this).data("image-index", i).data("div-used", false);
});
let lastImageIndex = null;
setInterval(function() {
// Get indexes that are already in ue
const usedIdx = images.map(function(i, e) {
return jQuery(e).data("image-index");
}).get();
// Filter indexes of urls that are not displayed yet
const unusedIdx = [];
urls.forEach(function(url, i) {
if (usedIdx.indexOf(i) == -1)
unusedIdx.push(i);
});
// get images div that not in use yet
unusedDivs = jQuery('.image').filter(function(i, e) {
return $(e).data("div-used") == false;
});
// Choose a random index from the unused indexes array
const randUnsedIdx = Math.floor(Math.random() * unusedIdx.length);
// Chose a random image div to apply image to
const randDivIdx = Math.floor(Math.random() * unusedDivs.length);
const current = unusedDivs.eq(randDivIdx);
lastImageIndex = randDivIdx;
// Get index number
const imgUrlIdx = unusedIdx[randUnsedIdx];
// fade out old image then on callback set the url of the new image
// then fade it in and assign the index to the dive so in next
// iteration we can filter it out
current.fadeOut(400, function() {
current.css('background-image', `url(${urls[imgUrlIdx]})`);
current.fadeIn();
current.data("image-index", imgUrlIdx).data("div-used", true);
// if all unsed divs have been used then reset
if (unusedDivs.length == 1)
jQuery('.image').data("div-used", false);
});
}, 2000);
body {
margin: 0;
font-size: 0;
}
.image {
background-size: cover;
display: inline-block;
width: 23%;
padding-top: 23%;
margin: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
这篇关于使用jQuery应用CSS值，但检查是否已指定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
