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

Nadpisywanie klass Css

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
334 wizyt
pytanie zadane 15 czerwca 2018 w JavaScript przez bicnet Gaduła (4,800 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,090 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,800 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,090 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 223 wizyt
pytanie zadane 13 kwietnia 2019 w HTML i CSS przez Greeenone Pasjonat (16,100 p.)
0 głosów
2 odpowiedzi 850 wizyt
pytanie zadane 22 września 2017 w JavaScript przez lastavenger Obywatel (1,060 p.)
0 głosów
2 odpowiedzi 775 wizyt
pytanie zadane 25 maja 2017 w JavaScript przez crova Użytkownik (940 p.)

93,103 zapytań

142,077 odpowiedzi

321,571 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...