• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nadpisywanie klass Css

0 głosów
117 wizyt
pytanie zadane 15 czerwca 2018 w JavaScript przez bicnet Gaduła (4,740 p.)

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.

1 odpowiedź

0 głosów
odpowiedź 15 czerwca 2018 przez imklau Nałogowiec (42,420 p.)
edycja 15 czerwca 2018 przez imklau

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?

komentarz 15 czerwca 2018 przez bicnet Gaduła (4,740 p.)
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.
1
komentarz 15 czerwca 2018 przez imklau Nałogowiec (42,420 p.)
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ć.

Podobne pytania

0 głosów
2 odpowiedzi 136 wizyt
pytanie zadane 13 kwietnia 2019 w HTML i CSS przez Greeenone Pasjonat (16,020 p.)
0 głosów
2 odpowiedzi 394 wizyt
pytanie zadane 22 września 2017 w JavaScript przez lastavenger Obywatel (1,060 p.)
0 głosów
2 odpowiedzi 214 wizyt
pytanie zadane 25 maja 2017 w JavaScript przez crova Użytkownik (950 p.)

86,427 zapytań

135,188 odpowiedzi

300,309 komentarzy

57,184 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...