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

Zamiana zdjęc na kafelkach i kontentu po kliknięciu w JavaScript

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
821 wizyt
pytanie zadane 18 grudnia 2018 w JavaScript przez wanderer Gaduła (3,710 p.)

Cześć,
mam do Was pytanie,
w jaki sposób można zrobić cos takiego:
Mam 9 kafelek w gridzie i po prawej strony miejsce na kontent.  Każda kafelka to zdjecie/ikona 150x 150px. Po najechaniu na 'Kafelkę1' ma ona zmieniac swoj kolor (hover, np. podmieniac się zdjecie) . Natomiast po kliknięciu w 'Kafelkę1' ma zostawac ten zmieniony kolor (podmienione zdjecie) oraz ma zmienic się kontent po prawej na ten przypisany do kafelki1.  Gdyby ktos kliknął w 'kafelkę3' to zapala się kafelka3 i wyswietla sie kontent dla kafelki3.
Próbowalem to robić  na zasadzie włączania i wyłączania pozostałych kafelek w js   .style.display = blockstyle.display=none  ale na dluzsza mete to jest słabe rozwiązanie.

1 odpowiedź

0 głosów
odpowiedź 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
W takim najprostszym rozwiązaniu to po prostu zrób sobie tablicę, zawierającą dane tych obrazków (url, title, alt itp.) i przeiteruj po niej generując dynamicznie te kafelki. Następnie nasłuchuj na kliknięcie w kafelka (np. ustaw event na container i sprawdzaj kliknięty element - event delegation) i pobieraj dane tego klikniętego elementu i względem nich ustawiaj content + to wyróżnienie w CSS.

Niezbyt wiem z czym dokładnie masz problem, bo nie dałeś żadnego kodu... Wrzuć na codepen co naskrobałeś i napisz konkretnie co Ci nie działa.
komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
Tu masz na szybko na kolanie naskrobany codepen: https://codepen.io/anon/pen/PXbYqb

Oczywiście to tylko pokazanie jakiegoś jednego ze sposobów, kod trzeba by dopracować i zrobić porządniej, ale wydaje mi się, że jako koncepcja to jest to wręcz gotowiec.
komentarz 18 grudnia 2018 przez wanderer Gaduła (3,710 p.)
edycja 18 grudnia 2018 przez wanderer
Dziekuje, proszę powiedz mi jak przepisac to na zwykly css?:
&:hover {
    cursor: pointer;
    background-color: blue;
  }
  &--active {
    border: 10px solid green;
    background-color: blue;
  }

 

EDIT:
już przepisałem sobie:
.item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 2rem;
 
  }
  .item:hover {
    cursor: pointer;
    background-color: blue;
  }
  .item--active {
    border: 10px solid green;
    background-color: blue;
  }
komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
Nie przepisu, poczytaj dokumentację scss, to proste, szybko się nauczysz, a jest to dziś standard :)
komentarz 18 grudnia 2018 przez wanderer Gaduła (3,710 p.)
Jakbym chciał dodawać zamiast kolorów zdjęcia , bo mam gotowe kafelki z ikonami  150x150 to mam je dodawać jako img scr jakos czy jako bachround-image i dawac  height i width tych kafelek na sztywno z @media rule?
komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
a to już zależy, tu lepiej niech się wypowiedzą spece od CSS bo ja akurat w CSS i zabawy z layoutem to jestem cieniutki.. uciekam od tego jak się da :) (i pisze to Frontend :D)
komentarz 19 grudnia 2018 przez wanderer Gaduła (3,710 p.)
Przeanalizowałem to i kontent jaki wyświetla się po prawej stronie jest słowem które jest wpisane w  const data = [{text: 'jeden'}, {text: 'dwa'}, {text: 'trzy'}];  Co w momencie gdy chcę by do kafelki1 był przypisany kontent 1 , a kontent1 miałby być  divami z obrazkami?
komentarz 19 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
textContent to tylko przyklad, ja Ci dalem gotowca co do idei, a co ty tam wsadzisz w te kafelki to juz od Ciebie zalezy... poczytaj o manipulacji DOM w js.
komentarz 19 grudnia 2018 przez wanderer Gaduła (3,710 p.)
Musze przyznać nie znam się tak na tym, natrafiłem na htmlContent ale jak do tego mam np umieszczać całe gridy z divów?
Nie bardzo rozumiem jak to można zrobić

Podobne pytania

0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 26 stycznia 2017 w JavaScript przez dekiel123 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 111 wizyt
pytanie zadane 6 lipca 2017 w JavaScript przez Jakub Domacki Użytkownik (660 p.)
–1 głos
1 odpowiedź 780 wizyt

93,103 zapytań

142,076 odpowiedzi

321,560 komentarzy

62,444 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!

...