Witam,
tworze ,,grę" memory cards dla dzieci jako nauki języka przez obrazki + słowo, jednak mam problem.
<div class="flash-card">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
.flash-card {
width: 90%;
height: 85vh;
margin: 0 auto;
background: #5e5e5e;
display: flex;
flex-wrap: wrap; }
.flash-card div {
width: 50%;
height: 50%;
border: 1px solid white; }
.hidden {
background-image: url("img/background_card.svg");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
background-color: #0f6a39; }
.off {
background-image: url("img/off_card.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 40%;
background-color: #2d4ec4; }
.cat {
background-image: url("img/cat.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #249340; }
.cat-word {
background-image: url("img/cat_word.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
background-color: black; }
.dog {
background-image: url("img/dog.svg");
background-repeat: no-repeat;
background-size: 100% 105%;
background-position: center;
background-color: #249340; }
.dog-word {
background-image: url("img/dog_word.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
background-color: black; }
const cardTab = ["cat" , "cat-word" , "dog" , "dog-word"];
let cards = document.querySelectorAll(".flash-card div");
cards = [...cards];
const randomCards = function()
{
cards.forEach(function(aCard)
{
const individualPosition = Math.floor(Math.random() * cardTab.length);
aCard.classList.add(cardTab[individualPosition]);
cardTab.splice(individualPosition, 1);
});
setTimeout(function()
{
cards.forEach(function(aCard)
{
aCard.classList.add("hidden");
})
}, 1000);
}
randomCards();
Wszystko niby działa, losuje się pierwsze ustawienie kart , później po sekundzie dodaje się klasa hidden , ale nie zmienia się obrazek (obrazek np. dog zostaje) , niby jak dam !important do zdj hidden to wtedy wszystko będzie działało, ale później jest jeszcze klasa off do której też bym musiał dać !important i by pewnie nie działało, więc chciałby to zrobić bez !important , tylko nie mam pomysłu jak.