Nadpisywanie klass Css

Question

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.

Answer 1

Swoją drogą jakbyś miał robić taką grę, gdzie będzie na planszy 30 obrazków (no czyli 15 różnych x 2) to będziesz każdemu dawał osobne klasy tylko po to, żeby miały odpowiedni obrazek? Chyba lepiej zrobić to za pomocą znacznika <img> i wtedy będziesz miał sporo mniej kodu.

Twój problem jest związany z czymś takim jak "CSS Specificity" - obrazek i artykuł

Zamiast używać ".flash-card div" lepiej od razu na te divy daj klasę i to jej używaj w CSS.

A czym się różni to .off od .hidden?

Comments

Każda plansza będzie indywidualna, w zależności od levelu, więc nie będzie 15x 2 tylko np. 3x4. Nie dałem za pomocą img , bo nie wiedziałem czy będzie działać losowanie (w sensie nie wiem jakby to wtedy napisać).

 

off od hidden rożni się obrazkiem, bo to będzie memory cards, czyli jak jest zasłonięte to będzie obrazem taki z pytajnikiem, a jak znajdzie się parę, wtedy wchodzi obrazek z off , czyli nie z pytajnikiem, tylko z czymś innym.

---

No wiadomo, Ty to robisz, więc możesz sobie ułatwić, że tylko tyle będzie miało, ale czasami jednak fajnie spojrzeć w przyszłość bo wtedy lepszy kod wychodzi :)

Ja bym jednak kombinowała ze znacznikiem <img>.

Poczytaj o tej specyficzności selektorów, bo to powinno rozwiązać Twój problem.
A tak w ogóle to bym nie dawała kolejnego obrazka jak będzie coś odgadnięte tylko chyba bym to ukrywała, ewentualnie jakoś przyciemniała - powinno to lepiej wyglądać.